角垫按钮样式不适用于垫对话框

Question

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

代码注册.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);
  }
}

代码对话框printdocs.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

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

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

Answer 2

卸载重试

使用以下命令卸载：

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

使用以下命令重新安装：

npm install -g @angular/cli