angular - Angular - fxFlex 对元素没有影响

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

I was working on exactly the same problem when I found your question...

It's actually answered on the Angular Material website: https://material.angular.io/components/toolbar/overview#positioning-toolbar-content

The problem is that fxFlex is not working on mat-toolbar. If you change your mat-toolbar to a div then fxFlex will work fine. But if you need to use mat-toolbar then you need to manually style the containers within the toolbar to make the flex work. Just using fxFlex, in the way you normally do, won't work on mat-toolbar.

Here's my working example for a full width toolbar with a logo on the left and some buttons on the right:

<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>