标签: angular-flex-layout

使用angular/flex-layout，我有一个简单的两列布局。

<div fxFlex fxLayout="row">
    <div fxFlex="35%">
        <!-- Left Column -->
    </div>
    <div fxFlex="65%">
        <!-- Right Column -->
    </div>
</div>

在小显示器上，我希望列环绕在左下方。

使用 angular/flex-layout 的响应式 API，我fxLayout.sm="column"在容器元素上为小屏幕（600px 和 959px 之间）添加了一个断点：

<div fxFlex fxLayout="row" fxLayout.sm="column">
    <div fxFlex="35%">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex="65%">
        <!-- Right Column, Bottom Row -->
    </div>
</div>

在小屏幕上，左列成为顶行，右列成为底行。

但是，fxFlex="35%"和fxFlex="65%"属性仍然受到尊重，因此行重叠。顶行占据了显示高度的35% ，因为它之前占据了显示宽度的35% 。

请参阅此 Plunker以获取问题示例。请注意，我使用fxLayout.xs断点而不是fxLayout.sm演示问题，因为 Plunker 将显示分成小部分。

我可以通过fxFlex …

我在使用 Angular Flex Layout 对齐项目时遇到问题。

下面的 snipper 没有<md-icon>与标题的右侧对齐，这正是我想要它做的。

关于如何实现这一点的任何建议？

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>

我正在使用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() …

我正在使用 Angular 2 应用程序使用 Angular 材料和 Angular Flex 布局。我在我的应用程序中创建了一个登录表单和一个标题，该标题仅在我的主页登录后可见。

在我的 app.component.html 中，我添加了标题并应用了以下样式以在滚动时修复它。

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">

在我的主页中，我添加了mat-toolbar组件、mat-card组件和mat-sidenav组件。

登录应用程序后，当我滚动时，主页内容与我的固定标题重叠，并且我的标题被主页内容覆盖。

请在此处访问我的示例应用程序

有人可以帮助我正确实施我的固定标头吗？

我想知道使用 Angular Flex-Layout 模块是否真的是一个好习惯。难道它只是糖衣内联样式，会带来额外的性能成本，因为样式是由 JavaScript 完成的吗？所以，如果可以的话，请向我解释一下为什么我应该使用它而不是基本的弹性盒？

我使用了 Angular Material 表，我从 ts 文件绑定了数据源，但是所有数据都加载在第一页上，分页不起作用。我还有两个表，它们在同一页上，其他表也有同样的问题.

我试过了

setTimeout(() => this.dataSource.paginator = this.paginator);

和

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML：

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="email">
        <mat-header-cell fxFlex="30" *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell …

我正在尝试使用 Angular Flex Layout 创建一个简单的页面。（实际上我正在从应用程序中删除 Bootstrap，因为我使用的是 Angular Material 并且觉得混合它们不是一件好事）。我的目标是通过只有页眉、内容和页脚来使用“圣杯布局”设置主页。

|------------------------------------|
|              Header                |
|------------------------------------|
|                                    |
|              Content               |
|                                    |
|------------------------------------|
|              Footer                |
|------------------------------------|

以下是代码

应用程序组件.html

<div class="main-container" fxLayout="column">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

应用组件.css

.main-container {
  min-height: 100vh;
  border:1px solid black;
}

主页.component.html

<div>
  home works!
</div>

主页.component.css

div {
  margin: 1px 0px 1px 0px;
  padding: 1px;
  border: 1px solid blue;
  height: 100%;
} …

我使用 Angular-Material mat-table Flex，我希望额外的内容不要像这样显示。

这就是我所拥有的：

而我想要的是：

我尝试使用text-overflow: ellipsis，但如果有人有想法，它不起作用，我很感兴趣。

StackBlitz在这里

谢谢

更新到 Angular 8，我所有使用 angular flex 并具有 ngClass 的代码都被破坏了：

<div class="pages-container"
       [ngClass.lt-md]="{'mobile-no-padding': true}">
    <router-outlet></router-outlet>
  </div>

渲染时返回错误： ERROR TypeError: this._delegate.setClass is not a function

只能通过删除动态响应后缀 ( [ngClass]="{'mobile-no-padding': true})来解决此问题，但这是一个很大的倒退......

您好，我想将垫菜单放置在菜单触发器的顶部。请在下面找到我的代码

<button (mouseover)="createMenuTrigger.openMenu() #createMenuTrigger="matMenuTrigger" [matMenuTriggerFor="createPlan"> OnHover </button>


<mat-menu #createPlan="matMenu">
   <button>Menu1</button>
   <button>Menu2</button
</mat-menu>

运行上述代码时，菜单面板显示触发器的底部或顶部。但它应该在触发器顶部打开。

当前工作菜单位置： 菜单在触发器上方或下方打开

预期的菜单面板： 菜单面板应在顶部显示触发“onHover”按钮。

请帮助我解决此 UI 更改。对于此更改，我没有得到任何有效的解决方案。提前致谢