材质按钮没有样式答案

【问题标题】：Material buttons do not get style材质按钮没有样式
【发布时间】：2020-03-20 05:02:04
【问题描述】：

在第一次进入我的 /home 路线时，我的导航按钮没有获得材料样式，.mat-button 的长链样式包括 min-width: 88px（我发现这是一个非常好的搜索键） .该样式包含在 vendor.bundle 中。它接收许多其他样式，例如 flex-layout 等。

当我从 Chrome 控制台查看时，样式表未列在元素的适用样式中。当我查看 DOM（在 elements->head 下）时，vendor.bundle.js 工作表未在加载的样式中列出！当我导航到 /login 并停留在那里时，它会被加载。在比较 home.module 和 login.module 之后，我在后者中找不到任何导入，但在前者中却没有（除了路由模块和两个模块的私有组件）。

奇怪的是：这只发生在 /home 初始进入的路由上。所有其他路由（例如 /login -- /home 和 /login 都没有路由保护）可以看到材质样式（带有最小宽度为 88px 等的较宽按钮）。更奇怪的是，如果我导航到任何路线并返回 /home，那么材质样式会重新出现。唯一没有出现的情况是当我输入 /home 到浏览器 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/bundle/material.umd.js line 3744

MdButton.decorators = [...

请对如何调试有任何建议吗？这快把我逼疯了。

【问题讨论】：

ng serve 和 ng build 都会发生这种情况。有和没有构建优化器。

标签： angular angular-material

【解决方案1】：

要让物质元素起作用，你需要自己导入MaterialModule：

import { MaterialModule } from '@angular/material'

而对于某些组件，你需要单独导入它们，像这样（例如，对于按钮）：

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

您可以在组件页面找到所需的导入，按钮将在此处（“API”选项卡）：https://material.angular.io/components/button/api

这里是：

【讨论】：

是的，它是进口的。很多材料模块（从几个测试版开始就需要这样做）。如果没有，我不认为导航和返回可以解决问题。
是的，请仔细检查。除了浏览器模块与通用模块之外，我还尝试将 /login 中添加的每个模块添加到 app.module 中，但是 app.component 在初始进入 /home 时仍然没有样式，但只是在导航到后突然变成样式/login，然后保持风格，即使回到 /home。
从 Angular Material 2 开始，情况不再如此。