index.html中样式部分中不存在Angular材质.mat-icon-button类

Question

我在角度组件中添加了一个mat-button,

<button mat-button class="toggle-button-navbar mat-icon-button" fxHide.lt-sm> 
    ?<mat-icon>menu</mat-icon>  ?
</button>

按钮显示.我希望.mat-icon-button css类包含在index.html的一个部分中.但它不在那里.我正在关注一个工作示例,该示例在所提供的index.html文件的一部分中没有.mat-icon-button css类(不在styles.bundle.css文件中).在该工作示例中,当我检查元素时,.mat-icon-button css类显示为:

.mat-icon-button {
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
}

我发现这个css类打包在@ angular/material/bundles/materical-button.umd.js文件中的MatButton.decorators中.但是,我无法弄清楚这个css类如何出现在工作示例的index.html中,但没有出现在我的index.html中.

Answer 1

只需导入MatButtonModule即可解决此问题.确保你也导入了MatIconModule.

Angular必须知道mat-button属性和<mat-icon>标记.

该mat-button属性应用组件.要注册组件,您必须导入MatButtonModule模块,该模块声明mat-button组件.

该<mat-icon>标签是一个组件.要注册mat-icon组件,您必须导入MatIconModule模块,该模块声明组件.这将创建mat-icon组件并导入css规则.

要解决您的问题,请在模块中添加以下代码:

import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
...
@NgModule({
  imports: [
    ...
    MatButtonModule,
    MatIconModule,
  ],
...

有关mat-icon模块的更多信息,请参阅:https: //material.angular.io/components/icon/api

有关Angular中组件注册的更多信息,请参阅:https: //angular.io/guide/architecture