角形材料组件

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指令的方式有问题。