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工具栏更改为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>

Angular - fxFlex对元素没有影响

2 个答案: