材质按钮没有风格

Question

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

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

奇怪的是：这只发生在初始进入的/ home路线上。所有其他路线（例如/ login - both / 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';

您可以在组件的页面上找到所需的导入，对于此处的按钮（＆＃34; API＆＃34;标签）：https://material.angular.io/components/button/api

这是：