角度-fxFlexは要素には何の影響もありません

Question

この質問は角度2+と@ angle/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

私はあなたの質問を見つけたとき、私はそれが実際に角度マテリアルのウェブサイト上で答えています...

を正確に同じ問題を働いていた：https://material.angular.io/components/toolbar/overview#positioning-toolbar-content

問題はfxFlexマット・ツールバーで動作していないということです。あなたのマットツールバーをdivに変更すると、fxFlexはうまく動作します。しかし、マットツールバーを使用する必要がある場合は、フレックスを動作させるためにツールバー内のコンテナを手動でスタイルする必要があります。通常どおりfxFlexを使うだけで、マットツールバーでは動作しません。

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