![](/img/trans.png)
[英]Angular 4 Material - mat-button style not being applied in mat-dialog component
[英]Angular mat-button style is not apllied in mat-dialog
我有一个项目 Angular 9。一切正常,但是当 mat-dialog 打开时,它包含几个按钮。 并且材质样式不适用于这些按钮。 我想知道为什么。 该问题仅存在于 mat-dialog window。 在其他页面中一切正常:垫按钮样式正确应用。 你不能帮我解决这个问题吗?
代码注册.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 { }
代码材料.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 { }
卸载并重试
使用以下命令卸载:
npm uninstall -g @angular/cli
npm cache clean --force
使用以下命令重新安装:
npm install -g @angular/cli
您忘记将DialogPrintDocsComponent
添加到模块中的declarations
-array 和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 { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.