将参数传递给 mat-dialog open 方法

Posted

技术标签:

【中文标题】将参数传递给 mat-dialog open 方法【英文标题】:passing parameter to mat-dialog open method 【发布时间】:2019-07-23 04:11:43 【问题描述】:

Angular 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);

【问题讨论】:

如果 t1 是您的组件,请将其添加到 appModule 或 entryComponents: [] 数组中的支持模块文件中 @Abhishek, t1,t2 已添加到 AppModule 中 是否可以分享appModule? 【参考方案1】:

您应该发送一个变量而不是字符串。它应该是 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>

【讨论】:

你的 component.ts 中有没有 t1 的实例 我已经更新了我的答案,您应该在属性中引用您的组件类名称 在声明 t1,t2 后,出现此错误 No component factory found for [object Object]. Did you add it to @NgModule.entryComponents? 你可以试试我建议的另一种方法 让我们continue this discussion in chat.【参考方案2】:

试试这样的

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,

希望有效果

【讨论】:

【参考方案3】:
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; );
    

【讨论】:

我虽然关于这个,但如果增加更多按钮,那么就像这样&lt;button mat-button (click)="openDialog('t1')"&gt;T1&lt;/button&gt; &lt;button mat-button (click)="openDialog('t2')"&gt;T2&lt;/button&gt; &lt;button mat-button (click)="openDialog('t3')"&gt;T3&lt;/button&gt; &lt;button mat-button (click)="openDialog('t4')"&gt;T4&lt;/button&gt;【参考方案4】:

这对我有用。你也可以参考这个链接。 link

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

你可能需要这样的东西:

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

然后在你的 DialogComponent 中你需要添加你的 name 属性:

public name: string;

【讨论】:

以上是关于将参数传递给 mat-dialog open 方法的主要内容,如果未能解决你的问题,请参考以下文章

将参数传递给从 R 中的字符串调用的用户定义函数的最佳方法是啥?

如何通过 System.Diagnostics.Process() 将参数传递给已经打开的终端

QProcess将参数传递给python脚本

使用AJAX将参数传递给PHP函数

将参数传递给 unordered_map(或集合)哈希结构

如何通过反射将参数传递给方法