我正在研究Angular 4,我正在尝试设置材料包,在这里我试图尝试对话,但它不起作用可能是因为材料包我不确定.
这是我的(dialog.components.ts):
import {Component,OnInit} from '@angular/core'; import {MatDialogRef} from '@angular/material' @Component({ selector: 'app-dialog',templateUrl: './dialog.component.html',styleUrls: ['./dialog.component.css'] }) export class DialogComponent implements OnInit { public receivedNode: any; constructor(public dialogRef: MatDialogRef<DialogComponent>) { } ngOnInit() { } }
在我的模块中:
import {MatButtonModule,MatMenuModule,MatToolbarModule,MatIconModule,MatCardModule,MatDialogRef} from '@angular/material'; @NgModule({ imports: [ CommonModule,MatButtonModule,RouterModule.forRoot( appRoutes,{enableTracing: true} ),],declarations: [],exports: [ MatButtonModule,MatCardModule ],entryComponents: [DialogComponent],providers: [MatDialogRef] }) export class DialogModule { }
我收到了这个错误:
有任何想法吗?
编辑
我的通话功能:
openPopup(){ const config = new MatDialogConfig(); const dialogRef: MatDialogRef<DialogComponent> = this.dialog.open(DialogComponent,config); dialogRef.componentInstance.receivedNode = "test"; console.log("test"); }
希望这有助于我拥有的东西:
组件:
import { MatDialog } from '@angular/material'; import { DialogComponent } from './dialogs'; // component name of dialog can add multiple in here. @Component({ selector: 'yourComponent',templateUrl: './yourComponent.html' }) export class YourComponent { private dialogRef: any; constructor(public dialog: MatDialog) { openPopup(){ this.dialogRef = this.dialog.open(DialogComponent,{ width: '250px',height: '25%',data: { errorcode: errorCode,errormessage: errorMessage } }); this.dialogRef.updatePosition({ top: '3%',left: '20%' }); }
在模块中:
import { DialogComponent } from './dialogs'; // component name of dialog import { NgModule,CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MatDialogModule } from '@angular/material'; @NgModule({ declarations: [ DialogComponent ],imports: [ BrowserModule,MatDialogModule ],entryComponents: [ DialogComponent ],schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA] })
最后一个对话框:
import {Component,OnInit} from '@angular/core'; import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-dialog',styleUrls: ['./dialog.component.css'] }) export class DialogComponent implements OnInit { constructor(public dialogRef: MatDialogRef<DialogComponent>,@Inject(MAT_DIALOG_DATA) private data: any) { } // this.data.errormessage contain error message. Not sure if need OnInit. ngOnInit() { } // I not use this I put the data in html and click on buttons there to interact with the component. }