Angular 4 Material - 垫子按钮样式未应用于垫子对话框组件答案

【问题标题】：Angular 4 Material - mat-button style not being applied in mat-dialog componentAngular 4 Material - 垫子按钮样式未应用于垫子对话框组件
【发布时间】：2018-04-14 11:54:48
【问题描述】：

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

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

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:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '@angular/material'

import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent
  ]
})
export class AppModule { }

【问题讨论】：

您正在将 MatButtonModule 导入到文件中，但它没有在模块导入中列出。

标签： html angular typescript angular-material2

【解决方案1】：

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

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

【讨论】：

我的情况下缺少 MatButtonModule

【解决方案2】：

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

【讨论】：

这是我的问题。一切都在正确的地方，只是忘了重新启动。
这解决了我的问题。我实际上是在关注 youtube 上的教程，并忽略了在安装新软件包之前停止服务器的说明。

【解决方案3】：

TL;DR
如果您有其他工作但不是特定组件，确保该组件的模块已导入和导入正确，因为模块必须添加到imports：
@NgModule{
  imports: [
    MatCardModule,
    MatButtonModule
  ]
})
注意： 记得停止“ng serve”脚本并在添加材料模块后再次运行它，因为新的 Angular 9 构建系统需要这样做。

说明：
我遇到了同样的问题，我有一个 CustomMaterialModule，我在其中导入了我需要的所有 材料模块在我的应用程序中使用。我正在使用 mat-button 但它的样式不存在。经过几分钟的搜索，我发现我只将 MatButtonModule 放在了我的 CustomMaterialModule 的导入数组中，而不是在导出数组中。

注意： 我的 CustomMaterialModule 托管了我需要的所有材料模块我的应用程序，所以像 MatButtonModule 这样的模块将进入我的 CustomMaterialModule 导入和导出数组，后来我只会在我的应用程序的其他地方使用我的 CustomMaterialModule。我这样做是为了保持代码干净且易于编辑。例如，如果一个月在路上我不需要一个材料模块我可以把它从我的 CustomMaterialModule，不用担心。

【讨论】：

回复很老了，但重要的是要知道，你实际上必须例如也导入MatButtonModule。我正在使用 WebStorm，它向我展示了我必须导入 MatToolbarModule 和 MatIconModule，因为它在组件模板中发现了这一点。但是由于我没有使用mat-button（甚至不知道它是否存在），而是button，所以它没有发现我也应该导入MatButtonModule。这样做之后，外观如预期。尝试使用 Angular 13、SCSS 和 WebStorm 2021.3。

【解决方案4】：

styles.css 中也可能缺少一行

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

【讨论】：

这对我有用，奇怪的是 ng cli 没有自动添加样式表
三年后，Angular 12 仍然没有。这个特别的问题让我在每个新项目中都感到困惑:-(
在尝试了 2 小时以使按钮起作用后，我同时感到愤怒和解脱......谢谢，这对我有用。

【解决方案5】：

我注意到的一些问题是 -

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

你也可以按照这个(https://material.angular.io/components/dialog/overview)的例子

【讨论】：

【解决方案6】：

在我的例子中，我有 2 个额外的模块，1 个用于垫子，另一个用于组件。

最初我将这两个模块都添加到了应用程序模块中，但没有奏效。

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

【讨论】：