Question

我想创建一个带有默认样式mat-dialog的{{1}}来关闭对话框。一切正常，但按钮缺少Angular Material应用的Material Design样式。

如何显示样式？ AFAIK我已根据需要导入了所有模块properly set up each part of Angular Material including the themes。

mat-button：

my-dialog.component.ts

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-my-dialog', templateUrl: './my-dialog.component.html', styleUrls: ['./my-dialog.component.css'] }) export class MyDialogComponent implements OnInit { constructor() { } ngOnInit() { } }：

my-dialog.component.html

<h1 mat-dialog-title>Lorem Ipsum</h1> <div mat-dialog-content> ... </div> <button mat-button mat-dialog-close>Close</button>：

app.module.ts

Answer 1

值得一提的是，新的angular 9构建系统要求您停止“ ng serve”脚本，并在添加材料模块后再次运行它。

Answer 2

需要将新导入的模块添加到imports：

@NgModule{
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  ...
})

Answer 3

如果您有其他工作但不是特定组件，确保导入组件的模块＆amp;正确导入。

我遇到了同样的问题，我有一个 CustomMaterialModule ，我导入了我需要在我的应用中使用的所有材料模块。我使用的是按钮，但它的风格并不存在。经过几分钟的搜索，我发现我只将MatButtonModule放在我的 CustomMaterialModule ＆amp;的导入数组中。不在出口数组中。

注意：我的CustomMaterialModule托管了我需要的所有材料模块我的应用程序所以像MatButtonModule这样的模块将进入我的 CustomMaterialModule导入和导出数组，后来我只会在我的应用程序的其他位置使用我的CustomMaterialModule。我这样做了保持代码清洁，易于编辑。例如，如果一个月在路上，我不需要材料模块，我可以将其从中删除我的CustomMaterialModule并不担心。

Answer 4

我注意到的一些问题是 -

从my-dialog.component.ts中的'@ angular / material'导入{MatDialog，MatDialogRef，MAT_DIALOG_DATA}
构造函数（公共对话框：MatDialog）{}缺失
未在app.module.ts文件中导入MatButtonModule

您也可以关注此（https://material.angular.io/components/dialog/overview）示例

Answer 5

在styles.css中也可能缺少一行

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Answer 6

在我的情况下，我有2个额外的模块，其中1个用于填充材料，另一个用于组件。

最初，我将两个模块都添加到了app-module中，但这没用。

我将mat-module导入移动到components-module（不是必须从app-module丢弃），并且它起作用了，我想这是因为DI。

Angular 4 Material - mat-button样式未应用于mat-dialog组件

6 个答案: