1

私は、Angular 4.3アプリで角度()に素材コンポーネントを使用しようとしています。すべてをインストールしてapp.component.htmlファイルにボタンを追加しました。ボタンはレンダリングされ、ここのように動作しますhttps://blox.src.zone/material#/directives/button角度付きルーティング用の素材コンポーネント

私のルートの1つにボタンを追加しようとしましたが、ボタンが同じにレンダリングされませんでした。ブートストラップのようなもので、CSSが引き継ぎました。

ルーティング先のコンポーネントで何かをインポートする必要がありますか?

答えて

0

あなたの質問に答えるための十分な情報がありません。 (どのようにプロジェクトをビルドしますか?マテリアルコンポーネントのスタイルシートはどこに置いたのですか、Webpack、AngleCli、ロールアップ、または他のビルドツールなどを使用しますか?しかし、私はコメントできません(十分な評判がない)ので、私はそれを試してみましょう。

@ComponentメタデータのstyleUrls宣言を使用して、単一のアプリコンポーネントにスタイルシート(おそらくCSSまたはscss)を追加したようです。 Angularはデフォルトでコンポーネントのスタイルをカプセル化します。その場合、スタイルはアプリコンポーネントにのみ適用されます。

Blox Materialプロジェクトでは、通常、素材タグのスタイルシートをアプリケーション・ワイド・スタイルシートとして追加する必要があります。これは、scriptタグを介してhtmlに組み込まれています。プロジェクトがAngular-CLIプロジェクトの場合、これは.angular-cli.jsonファイルで指定されているように、アプリケーションの「スタイル」フィールドに指定されたファイルです。これはまた、Bloxマテリアルの入門ガイドで説明されています。https://blox.src.zone/material#/guides/gettingstartedを参照してください。

また、スタイルシートを複数のコンポーネントに同時に適用するには、スタイルシートをアプリケーションのルートコンポーネントに配置したり、encapsulation: ViewEncapsulation.Noneというメタデータに含めて@Componentメタデータに追加することもできます。

これが解決しない場合は、もう少し情報を提供し、デベロッパーツールを使用してアプリコンポーネントに適用されるスタイル(およびセレクタ)を確認してください。それはおそらく彼らがあなたの他のコンポーネントに適用されない理由として手がかりを与えるでしょう。また、ブートストラップのような他のスタイルがマテリアルコンポーネントスタイルをオーバーライドしているかどうかを示します。

最後に、Blox Materialディレクティブが実際にボタンに適用されていることを確認します。mdcButtonは自動的に少なくともmdc-buttonmdc-ripple-upgradedのスタイルを取得する必要があります。ボタンにこれらのスタイルが表示されない場合は、mdcButtonディレクティブの適用方法に問題があります。

関連する問題