无法解析MatDialogRef angular 4的所有参数 [英] Can't resolve all parameters for MatDialogRef angular 4
本文介绍了无法解析MatDialogRef angular 4的所有参数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Angular 4,正在尝试设置材料包,在这里我尝试尝试对话框,但由于我不确定材料包而无法正常工作.
I'm working on Angular 4 and I'm trying to setup material package, and here I'm trying to try dialog, but it doesn't work maybe because of material package I'm not sure.
这是我的(dialog.components.ts):
This is my (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,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
RouterModule.forRoot(
appRoutes,
{enableTracing: true}
),
],
declarations: [],
exports: [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
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");
}
推荐答案
希望这可以帮助我完成此任务:
Hope this helps this is what I have done:
在组件上:
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',
templateUrl: './dialog.component.html',
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 have not used this. Instead, I have put the data in HTML and click on buttons from there to interact with the component.
}
这篇关于无法解析MatDialogRef angular 4的所有参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文