将参数传递给Mat-dialog打开方法

时间:2019-03-01 06:48:43

标签: angular dialog angular-material

角度7.1 AngularMaterial 7.3

我正在尝试调用函数并传递一些值,它提示以下错误

  

没有找到t1的组件工厂。您是否将其添加到@ NgModule.entryComponents?

尽管t1中包含entryComponent。但是一旦删除传递的值以固定值,它将起作用。

  <button mat-button (click)="openDialog('t1')">T1</button>
  <button mat-button (click)="openDialog('t2')">T2</button>

一旦我传递值,它就会显示上面的代码。

  openDialog(e) {
    console.log(e);
    const dialogRef = this.dialog.open(e);
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
      dialogRef == null
    });
  }

@Component({
  selector: 't1',
  templateUrl: 't1.html',
})
export class t1 {}

@Component({
  selector: 't2',
  templateUrl: 't2.html',
})
export class t2 {}

但是一旦我删除该值并修复了dialogRef.open,它就可以正常工作

const dialogRef = this.dialog.open(t1);

4 个答案:

答案 0 :(得分:0)

您应该发送变量而不是字符串。应该是t1而不是't1'

  <button mat-button (click)="openDialog(t1)">T1</button>
  <button mat-button (click)="openDialog(t2)">T2</button>

在component.ts中,您应该声明组件

public t1 = new t1();
public t2 = new t2();

或者您可以使用template variables

尝试以下方法
  <t1 #test1></t1>
  <t2 #test2></t2>
  <button mat-button (click)="openDialog(test1)">T1</button>
  <button mat-button (click)="openDialog(test2)">T2</button>

答案 1 :(得分:0)

尝试类似的方法

constructor(
    public dialogRef: MatDialogRef<Component>,
    private dialog: MatDialog,
  ) { }


  openDialog(t1) {
    const dialogRef = this.dialog.open(NameComponent, {
      data: { t1 }
    });
    dialogRef.afterClosed().subscribe(data => {

  }

在对话框组件中检索

 @Inject(MAT_DIALOG_DATA) public data: any,

希望它能起作用

答案 2 :(得分:0)

openDialog(dialog : string) {
    if(dialog == "t1"){
     const dialogRef = this.dialog.open(t1,{ data: { "YOURVALUE" }});
     dialogRef.afterClosed().subscribe(result => { this.YOURVALUE = result; });
    }
    else {
     const dialogRef = this.dialog.open(t2,{ data: { "YOURVALUE" }});
     dialogRef.afterClosed().subscribe(result => { this.YOURVALUE = result; });
    }
}

答案 3 :(得分:0)

这对我有用。您也可以参考此链接。 link

您可以使用dialogRef.componentInstance.myProperty = 'some data'来设置组件上的数据。

您可能需要这样的东西:

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
        });
dialogRef.componentInstance.name = 'Sunil';

然后在DialogComponent中,您需要添加name属性:

public name: string;