Angular 4 材質 - mat-button 樣式未應用於 mat-dialog 組件

Question

我想創建一個帶有默認樣式mat-button的mat-dialog ，用於關閉對話框。 除了按鈕缺少 Angular Material 應用的 Material Design 樣式外，一切正常。

如何讓風格展現？ AFAIK 我已經根據需要導入了所有模塊，並正確設置了 Angular 材料的每個部分，包括主題。

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 { }

Answer 1

新導入的模塊需要添加到imports ：

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

Answer 2

值得注意的是，新的 angular 9 構建系統要求您在添加材料模塊后停止“ng serve”腳本並再次運行它

Answer 3

TL; 博士
如果您有其他工作但不是特定組件，請確保組件的模塊已正確導入和導入，因為模塊必須添加到imports ：

 @NgModule{ imports: [ MatCardModule, MatButtonModule ] })

解釋：
我遇到了同樣的問題，我有一個CustomMaterialModule ，我在其中導入了我需要在我的應用程序中使用的所有材料模塊。 我正在使用 mat-button 但它的樣式不存在。 經過幾分鍾的搜索，我發現我只將 MatButtonModule 放在我的CustomMaterialModule 的導入數組中，而不是放在導出數組中。

注意：我的 CustomMaterialModule 在我的應用程序中承載了我需要的所有材料模塊，因此像 MatButtonModule 這樣的模塊將進入我的 CustomMaterialModule 導入和導出數組，然后我只會在我的應用程序的其他地方使用我的 CustomMaterialModule。 我這樣做是為了保持代碼干凈且易於編輯。 因此，例如，如果一個月后我不需要材料模塊，我可以將它從我的 CustomMaterialModule 中刪除而不必擔心。

Answer 4

我注意到的一些問題是 -

• 在 my-dialog.component.ts 中從“@angular/material”導入 {MatDialog, MatDialogRef, MAT_DIALOG_DATA}

• 構造函數（公共對話框：MatDialog）{} 缺失

• MatButtonModule 未在 app.module.ts 文件中導入

你也可以按照這個（ 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。

Answer 7

在AppModule的聲明中添加您的對話框。 這個對我有用。

@NgModule({ 聲明：[ AppComponent, ..., YourDialogComponent ],

Answer 8

您需要在您的 app.module.ts 文件中導入此 package

import { MatButtonModule } from '@angular/material/button'

然后在導入中添加這個

imports: [MatButtonModule,...]