javascript - 带铣削 Angular Material 组件

Question

我正在尝试在我的 Angular 4.3 应用程序中使用 Angular 的 Material 组件 ( https://blox.src.zone/material#/guides/gettingstarted )。我已经安装了所有内容，并向我的 app.component.html 文件添加了一个按钮，该按钮已呈现，并且其行为就像此处应有的 https://blox.src.zone/material#/directives/button 一样。 .

然后，我尝试在其中一条 route 添加一个按钮，但该按钮的渲染效果不一样。就像 bootstrap css 已经接管了一样。

我必须在路由到的组件中导入任何内容吗？

Answer 1

没有足够的信息来回答您的问题。 (您如何构建您的项目，您将 Material 组件的样式表放在哪里，您是否使用 webpack、Angular cli、rollup 或其他构建工具等)。但由于我无法发表评论(没有足够的声誉)，所以我会尝试一下。

从您的描述来看，您似乎通过 @Component 元数据中的 styleUrls 声明将样式表(可能是 css 或 scss)添加到单个应用程序组件中。默认情况下，Angular 会封装组件的样式，因此在这种情况下，您的样式仅适用于您的应用程序组件。

对于 Blox Material 项目，您通常希望将 Material 组件样式表添加为应用程序范围样式表，通过脚本标记包含在 html 中。当您的项目是 Angular-CLI 项目时，这是在您的应用程序的“styles”字段中命名的文件，如 .angular-cli.json 文件中给定的。这也是 Blox Material 入门指南的描述，请参阅 https://blox.src.zone/material#/guides/gettingstarted .

或者，您可以将样式表放在应用程序的根组件中和/或在 @Component 元数据中使用 encapsulation: ViewEncapsulation.None 来制作样式同时应用于多个组件。

如果这没有帮助，请提供更多信息，并尝试使用开发人员工具来查看哪些样式(以及由哪些选择器)应用于您的应用组件。这可能会给您提供线索，说明为什么它们没有应用于您的其他组件。它还会告诉您其他样式(例如 Bootstrap 样式)是否会覆盖 Material 组件样式。

最后检查 Blox Material 指令是否确实应用于您的按钮:mdcButton 应至少自动获取 mdc-button 和 mdc-ripple-upgraded 样式。如果您在按钮上没有看到这些样式，则说明您应用 mdcButton 指令的方式有问题。