标签: angular-flex-layout

我在angular 4应用程序中使用https://github.com/SebastianM/angular-google-maps.

我必须在CSS中指定地图高度,否则,地图将不会显示:

agm-map {
  height: 300px;
}

是否可以<agm-map>填充父容器中的剩余空间？

PS:我更喜欢使用https://github.com/angular/flex-layout的解决方案

我正在尝试使用ObservableMedia。应用程序编译成功，但是在浏览器控制台中我看到此错误

错误错误：没有ObservableMedia提供程序！在injectionError（core.es5.js：1169）处在noProviderError（core.es5.js：1207）

这是我的代码

import { Component , OnInit, ViewChild} from '@angular/core';    
    import {Observable} from 'rxjs/Rx';
    import {MediaChange, ObservableMedia} from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {


constructor(
  public media: ObservableMedia) {

 }

  routeLinkClick() {
    if (!this.media.isActive('gt-xs')) {
      this.sidenav.toggle();
    }
  }

请帮忙。谢谢

我可以使用open属性或open()方法和flex-layout响应api来使mat-sidenav响应吗？喜欢<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">

我正在使用Angular（v5.0.2）和Angular-FlexLayout（v2.0.0-beta.10-4905443）。我正在尝试对@ angular / flex-layout提供的每个指令使用自定义断点。

我添加了自定义断点：

import {DEFAULT_BREAKPOINTS, BREAKPOINTS} from '@angular/flex-layout';

const CUSTOM_BREAKPOINTS = [
  {
    alias: 'sm.landscape',
    suffix: 'SmLandscape',
    mediaQuery: 'screen and (min-width:55em) and (max-width: 80em) and (orientation: landscape)',
    overlapping: true
  }
];

export const CustomBreakPointsProvider = {
  provide: BREAKPOINTS,
  useValue: [...DEFAULT_BREAKPOINTS,...CUSTOM_BREAKPOINTS],
};

我扩展了ShowHideDirective：

import { Directive, ElementRef, Renderer2, Input, Optional, Self } from '@angular/core'
import { ShowHideDirective, negativeOf, LayoutDirective, MediaMonitor } from '@angular/flex-layout'

@Directive({
  selector: `
    [fxHide.sm.landscape],
    [fxShow.sm.landscape],
  `
})
export class CustomShowHideDirective extends ShowHideDirective {
  constructor(monitor: MediaMonitor, @Optional() …

我有一个图像库,我想在基于宝丽来卡的系统中显示它们,跨越多行和多列.我面临的问题与图像的布局有关.当图像同时是纵向和横向时,横向图像的mat-card属性会变得臃肿,以匹配纵向的尺寸.如何使用自然填充系统,垫卡可以适应图像的宽高比？

HTML:

<div fxLayout="row">
    <div layout="column">
        <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null">
            <mat-card *ngFor="let postcard of postcards let index = index" >
                    <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
            </mat-card>
        </div>
    </div>
</div>

CSS:

.postcards {
    max-width: 320px;
}

目前来看:

这就是我想要实现的目标:

谢谢!

我正在使用angular 5中的父子关系创建一个具有多个组件的应用程序.

在我的主app.component.html里面我有这个结构.

        <app-layout-header></app-layout-header>
           <app-layout-view></app-layout-view>
           <app-layout-add></app-layout-add>

           <router-outlet></router-outlet>

        <app-layout-footer></app-layout-footer>

这个指令"app-layout-header"负责加载侧导航和顶部导航.

现在这个指令"app-layout-view"负责加载这样的数据表或网格.

我想使用flex布局,以便我可以使它响应,我也想要这样的最终结果.

但我不确定如何将数据表准确放置在我想要的位置,即在top-nav-bar下方并靠近侧边菜单.目前,它位于整个侧面菜单的下方,您可以在第二张图片中看到.

我现在该怎么办才能得到理想的结果？

我有这些代码块

<div fxLayout="row" fxLayoutGap="1em" fxLayout.lt-md="column" fxLayoutWrap>
    <div *ngFor="let post of posts; let i=index" >
         <div *ngIf = "i%3===0" fxFlex="90%" fxFlex.lt-md="100%">
             <!--Some code-->
         </div>
         <div *ngIf = "!(i%3===0)" fxFlex="40%" fxFlex.lt-md="100%">
             <!--Some other code-->
         </div>
    </div>
</div>

我希望这些东西在我使用时位于同一行fxFlex="40%"但是,它们出现在不同的行上

这是我的代码

<div fxLayout="row"
     fxLayoutAlign="end center">

我想给fxLayoutAlign添加一个条件。我不知道该怎么做。有人可以帮忙吗？

我尝试了以下方法：

<div fxLayout="row"
     fxLayoutAlign="isCondition? 'start center' : 'end center'">

但没有任何作用

谢谢

我有一个这样的基本布局：

   Cell 0     Cell 1      Cell 2 <!-- these are not to appear in actual render
 __________________________________
 | Image 0  | Image 1  | Image 2  |
 |----------| Image 1  |-----------
 | text here| Image 1  | text here|
 ----------------------------------
   Cell 3     Cell 4      Cell 5 <!-- these are not to appear in actual render
 __________________________________
 | Image 3  | Image 4  | Image 5  |
 |----------|----------| Image 5  |
 | text here| text here| Image 5  |
 ----------------------------------

根据屏幕大小，每行应该有 …

我使用 angular material 和 angular flex layout 创建了一个 angular 应用程序。该应用程序的问题在于，每当我在 chrome 中按 Ctrl + P 时，导航栏中的所有菜单都会消失，并且只应出现在移动设备中的菜单按钮会出现，最重要的是整个应用程序变得无法使用。我必须刷新浏览器才能使应用程序可重用。我从 angular flex 布局的 github 问题页面中读到，当打印对话框出现时，UI 线程被中断，因此出现了问题。是否有解决此问题的方法。

我为相同的“ angular-responsive-navbar ”创建了一个git repo，以便任何人都可以重现该问题。