我正在以角度进行模态应用。我从角度官方网站复制代码,但这不起作用我的系统。这个代码完全在plunker工作。请提前告诉我错误。
我的app.module.ts文件就是这个。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatFormFieldModule } from '@angular/material';
import { MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent, DialogOverviewExampleDialog } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { MatDialog, MatDialogRef } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
HttpModule,
],
providers: [MatDialogRef],
bootstrap: [AppComponent]
})
export class AppModule { }

我的app.component文件就是这个。
import { Component } from '@angular/core';
import { Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
animal: string;
name: string;
dialogRef: any;
constructor(public dialog: MatDialog) { }
openDialog(): void {
this.dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { name: this.name, animal: this.animal }
});
this.dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: './modal.component.html',
})
export class DialogOverviewExampleDialog {
constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
&#13;
请让我知道问题出在哪里。
答案 0 :(得分:0)
您需要将DialogOverviewExampleDialog
添加到declarations
和entryComponents
(entry components)。
import { MatDialogModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
DialogOverviewExampleDialog
],
entryComponents: [
DialogOverviewExampleDialog,
],
imports: [
BrowserModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
HttpModule,
MatDialogModule,
],
providers: [MatDialogRef],
bootstrap: [AppComponent]
})
export class AppModule { }
答案 1 :(得分:0)
如果直接从“ ng add @ angular / material”中添加依赖项,请确保停止运行的应用程序并重新编译angular应用程序,这将使最近添加的依赖项可用。