素材ボタンがスタイルを取得しない

Question

私の/ homeルートへの最初の入力時に、ナビゲーションボタンは素材スタイル、長さがmin-widthを含む.mat-buttonスタイルの長いチェーンを取得しません：88px検索するには良いキー）。スタイルはvendor.bundleに含まれています。フレックスレイアウトなど多くのスタイルを受け取ります。

Chromeコンソールから見ると、スタイルシートは要素に適用されるスタイルの中には表示されません。 DOMを（element-> headの下で）見ると、vendor.bundle.jsシートは読み込まれたスタイルの中にリストされません！私は/ loginに移動してそこにとどまるとロードされます。 home.moduleとlogin.moduleを比較した後、私は後者ではインポートを見つけることができませんが、ルーティングモジュールと2つのモジュールのプライベートコンポーネント以外は前者では見つかりません。

これは奇妙です：これは最初のエントリで/ homeルートにのみ発生します。他のすべてのルート（/ login -/homeと/ loginの両方にはルートガードがありません）は、マテリアルスタイル（最小幅88pxなどの幅の広いボタン）を表示できます。より興味深いのは、ルートに移動して/ homeに戻ると、マテリアルスタイルが再び表示されることです。表示されない唯一のケースは、/ home to browser URLボックスを入力するときです。

ナビゲーションボタンは私のapp.conponentの一部であり、home.componentの親であることに注意してください。/homeへの最初のナビゲーションがapp.componentのスタイルを変更した原因がわかりません。

ネットワークトレースは、/ homeをロードした後、/ loginに切り替えて/ homeに戻ったときに他のものがロードされないことを示しています。

config: 
@angular/cli: 1.4.4 
@angular/core: 4.4.4 
@angular/material: 2.0.0-beta.11 

私が述べた88pxは材料/バンドル/ material.umd.jsライン3744

MdButton.decorators = [... 

これをしてくださいデバッグする方法上の任意の提案を含めて多くの場所、で見つけることができますか？これは私を夢中にさせている。

Answer 1

動作するように材料の要素を取得するには、あなたがMaterialModule自体をインポートする必要があります。

import { MaterialModule } from '@angular/material' 

そして、いくつかのコンポーネントのために、あなたはこのような（例えば、ボタンのために）、それらを個別にインポートする必要があります。

import { MdButtonModule } from '@angular/material'; 

あなたはボタンのために、それは（「API」タブ）ここになり、コンポーネントのページで必要な輸入品を見つけることができます：https://material.angular.io/components/button/api

ここにある：