材质按钮没有样式

Question

在第一次进入我的 /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 = [...

关于如何调试这个有什么建议吗？这真让我抓狂。

Answer 1

要使材料元素起作用，您需要导入MaterialModule自身：

import { MaterialModule } from '@angular/material'

对于某些组件，您需要单独导入它们，如下所示（例如，对于按钮）：

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

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

这里是：