Angular

Question

这个问题与 Angular 2+ 和 @angular/flex-layout 包有关。

例如，当尝试使用 fxFlex="30" 时，CSS 样式未应用于元素。

<mat-toolbar fxFlex="30" color="primary">
    <h2>Uh-oh</h2>
</mat-toolbar>

Answer 1

确保像这样在 app.module.ts 中导入模块：

import { FlexLayoutModule } from '@angular/flex-layout';

并将其添加到 @NgModule 中的导入。

Answer 2

当我发现你的问题时，我正在处理完全相同的问题...

实际上在 Angular Material 网站上得到了回答：https://material.angular.io/components/toolbar/overview#positioning-toolbar-content

问题是 fxFlex 在 mat-toolbar 上不工作。如果您将 mat-toolbar 更改为 div，那么 fxFlex 将正常工作。但是，如果您需要使用 mat-toolbar，那么您需要手动设置工具栏中容器的样式以使 flex 工作。仅以您通常使用的方式使用 fxFlex，将无法在 mat-toolbar 上工作。

这是我的全宽工具栏的工作示例，左侧有徽标，右侧有一些按钮：

<mat-toolbar color="primary">

  <span>
    put the left content here, for example your logo
  </span>

  <span fxFlex style="flex: 1 1 auto;"></span>

  <span>
    put the right content here, for example a button
  </span>

</mat-toolbar>

Answer 3

如果您忘记在其模块中导入和声明使用 fxflex 的组件，就会发生此行为。

因此，如果您有组件“home”，则必须记住 app.module.ts（或子模块）

...
import { HomeComponent } from './home/home.component';
@NgModule({
    declarations: [
      AppComponent,
      NavbarComponent,
      HomeComponent
    ],
    imports: [
...

Angular - fxFlex 对元素没有影响

Angular - fxFlex has no effect on elements

angular-material2

angular-flex-layout