angular - Material 按钮没有样式

Question

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

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

奇怪的是:这只发生在初始进入时的/home 路由上。所有其他路由(例如/login --/home 和/login 都没有路由保护)可以看到 Material 样式(带有最小宽度为 88px 等的较宽按钮)。更奇怪的是，如果我导航到任何路线并返回/home，那么 Material 样式会重新出现。他们没有出现的唯一情况是当我输入/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

要使 Material 元素起作用，您需要导入 MaterialModule本身:

import { MaterialModule } from '@angular/material'

而对于某些组件，您需要单独导入它们，像这样(例如，对于按钮):

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

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

这里是: