Angular mat-button 样式未应用于 mat-dialog

Question

我有一个项目Angular 9. 一切正常，但是当打开 mat-dialog 时，它包含几个按钮。 material-style 不适用于这些按钮。我想知道为什么。问题只存在于一个 mat-dialog window。在其他页面中，一切正常：正确应用垫按钮样式。你不能帮我解决这个问题吗？

代码enrollments.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Enrollment } from './enrollment';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-printdocs',
  templateUrl: './dialogprintdocs.component.html'
})
export class DialogPrintDocsComponent { }

@Component({
  selector: 'app-enrollments',
  templateUrl: './enrollments.component.html',
  styleUrls: ['./enrollments.component.css']
})
export class EnrollmentsComponent implements OnInit {

  public enrollments: Enrollment[];
  public displayedColumns: string[] = ['id', 'date', 'freb', 'print'];

  constructor(
    private dataService: DataService,
    private dialog: MatDialog) { }

  ngOnInit(): void {
    this.loadData();
  }

  loadData(filter: string = null): void {
    this.dataService.getData(filter).subscribe(result => {
      this.enrollments = result;
    }, error => console.error(error));
  }

  openDialog() {
    this.dialog.open(DialogPrintDocsComponent);
  }
}

代码dialogprintdocs.component.html:

<button mat-button>Cancel</button>
<button mat-button>OK</button>

代码app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { EnrollmentsComponent } from './enrollments/enrollments.component';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    EnrollmentsComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: EnrollmentsComponent, pathMatch: 'full' },
    ]),
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

代码material.module.ts:

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
    exports: [
        MatTableModule,
        MatInputModule,
        MatIconModule,
        MatDialogModule,
        MatButtonModule
    ]
})
export class MaterialModule { }

Answer 1

卸载并重试

使用以下命令卸载：

npm uninstall -g @angular/cli
npm cache clean --force

使用以下命令重新安装：

npm install -g @angular/cli

Answer 2

您忘记将 DialogPrintDocsComponent 添加到模块中的 declarations 数组和 entryComponents 数组。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { EnrollmentsComponent, DialogPrintDocsComponent } from './enrollments/enrollments.component';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    EnrollmentsComponent,
    DialogPrintDocsComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: EnrollmentsComponent, pathMatch: 'full' },
    ]),
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ DialogPrintDocsComponent]
})
export class AppModule { }

Angular mat-button 样式未应用于 mat-dialog

Angular mat-button style is not apllied in mat-dialog

angular-material

angular

mat-dialog