角形材料組件

Question

我正在嘗試在Angular 4.3應用程序中將Material組件用於angular（ https://blox.src.zone/material#/guides/gettingstarted ）。 我已經安裝了所有內容，並在app.component.html文件中添加了一個按鈕，該按鈕已呈現並表現為應該在這里https://blox.src.zone/material#/directives/button 。

然后，我嘗試在我的一條路線中添加一個按鈕，但該按鈕未呈現相同的效果。 就像引導css已經接管了。

我必須在要路由到的組件中導入任何內容嗎？

Answer 1

沒有足夠的信息來回答您的問題。 （如何構建項目，在何處放置材料組件的樣式表，使用webpack，angular cli，匯總或其他構建工具等）。 但是由於我無法發表評論（聲譽不足），因此我將嘗試一下。

從您的描述中，聽起來就像您通過@Component元數據中的styleUrls聲明將樣式表（可能是css或scss）添加到了單個應用程序組件中。 默認情況下，Angular封裝了組件的樣式，因此在這種情況下，您的樣式僅適用於您的應用程序組件。

對於Blox Material項目，您通常希望將材料組件樣式表添加為應用程序范圍的樣式表，並通過script標簽將其包含在html中。 當您的項目是Angular-CLI項目時，這是.angular-cli.json文件中給定的應用程序的“樣式”字段中.angular-cli.json文件。 這也是Blox Material入門指南所描述的內容，請參閱https://blox.src.zone/material#/guides/gettingstarted 。

或者，您可以將樣式表放在應用程序的根組件中和/或使用encapsulation: ViewEncapsulation.None在@Component元數據中encapsulation: ViewEncapsulation.None ，以使樣式同時應用於多個組件。

如果這樣做沒有幫助，請提供更多信息，並嘗試使用開發人員工具查看將哪些樣式（以及通過哪些選擇器）應用於您的應用程序組件。 這可能會為您提供線索，說明為什么它們沒有應用於您的其他組件。 它還會告訴您其他樣式（例如引導程序）是否覆蓋了材料組件樣式。

最后，檢查是否確實將Blox Material指令應用於按鈕：mdcButton應該至少自動獲得mdc-button和mdc-ripple-upgraded樣式。 如果您在按鈕上看不到這些樣式，則您應用mdcButton指令的方式有問題。