为什么我的 Angular 应用程序加载时没有立即应用预期的 Material 按钮样式，只是稍后应用？

Question

在我正在构建的 Angular 应用程序中，我有一个带有三个链接的工具栏组件。第一个返回到应用程序，其他返回到不同的组件。两个链接元素都应用了class="mat-button"，因为我想使用现有的样式。

第一个组件包含一个属性为mat-raised-button的按钮。

第二个组件只包含文本。

当应用程序最初加载时，工具栏看起来很丑。

点击第二个链接的时候，加载了第二个组件，但是工具栏还是很丑。

当点击第一个链接时，第一个组件被加载并且工具栏看起来好多了。

如果我然后单击主页，我会返回应用程序页面，工具栏仍然看起来不错。

我在工具栏中看到的是链接元素最初应用的样式很少：

单击第一个链接后，它们应用了更多样式：

但我想如果我在 AppModule 中加载一个模块，所有的模块都会被加载，包括任何可用的样式。

我怎样才能使工具栏最初也很漂亮？我可以只使用 mat-button 以外的东西，但我真的很好奇为什么会出现这种行为。

StackBlitz 及相关代码：https://stackblitz.com/edit/angular-wwlrtv

Answer 1

我刚刚安装了新的 Angular 11。到目前为止，一切都在书本上，默认值，接近于从材料文档中复制粘贴元素。 突然我意识到 mat-toolbar (MatToolbarModule) 没有样式，在页面上看起来像一个空白：

在第一次单击任何按钮后，样式会加载并保持到下一个页面重新加载。我不得不回去检查设置，我发现MatCheckboxModule 没有被导入。没有编译错误/警告。

未导入的模块会破坏属于其他模块的样式。必须导入所有模块。

导入 Checkbox 模块后，样式恢复正常。

Answer 2

我从

更改了工具栏

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" class="mat-button">Home</a>
  <a routerLink="path1" routerLinkActive="active" class="mat-button">Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" class="mat-button">Link 2 - Nothing happens</a>
</mat-toolbar>

到

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" mat-button>Home</a>
  <a routerLink="path1" routerLinkActive="active" mat-button>Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" mat-button>Link 2 - Nothing happens</a>
</mat-toolbar>

这解决了问题。