角4材料 - マットボタンのスタイルがマットダイアログコンポーネントに適用されていません

Question

mat-dialogをデフォルトスタイルのmat-buttonで作成してダイアログを閉じたいとします。ボタン以外のすべてが機能しますが、アンギュラマテリアルによって適用されたマテリアルデザインスタイルはありません。

スタイルを表示するにはどうすればよいですか？ 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 { } 

Answer 1

新しくimporte Dモジュールはimportsに追加する必要があります。

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

Answer 2

私は気づいたいくつかの問題がある -

• インポートから{MatDialog、MatDialogRef、MAT_DIALOG_DATA} '@角度/材料' をご自分の-dialog.component.tsで

• コンストラクタ（パブリックダイアログ：MatDialog）{}欠けている

• MatButtonModuleあなたもこの（https://material.angular.io/components/dialog/overview）に追従することができますapp.module.tsファイル内

を輸入していない例