如何将服务变量传递到 Angular Material 对话框中? [英] How can I pass a service variable into an Angular Material dialog?

问题描述

对于 mdDialog，我该怎么做传入变量?具体来说，如何在对话框组件中注入一个Angular服务?

解决方案

为了传递变量，您可以从 MdDialog.open() 方法调用中返回的 MdDialogRef 实例中获取在对话框中打开的组件的实例.

>

dialogRef = this.dialog.open(PizzaDialog, config)dialogRef.componentInstance.

来自 github material2 的修改过的 Pizza文档 角度材料文档

@Component({选择器:'比萨组件'，模板:`<按钮类型=按钮"(click)=openDialog()">打开对话框</button>`})导出类 PizzaComponent {构造函数(公共对话框:MdDialog){}打开对话框(){让 config = new MdDialogConfig();let dialogRef:MdDialogRef= this.dialog.open(PizzaDialog, config);dialogRef.componentInstance.name = "火腿和菠萝";dialogRef.componentInstance.size =大"；}}@成分({选择器:'比萨对话框'，模板:`<h2>{{name}}</h2><p>尺寸:{{size}}</p><按钮类型=按钮"(click)=dialogRef.close('yes')">Yes</button><按钮类型=按钮"(click)=dialogRef.close('no')">No</button>`})导出类 PizzaDialog {名称:字符串；大小:字符串；构造函数(公共对话框引用:MdDialogRef){}}

For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?

解决方案

For passing variables you can grab the instance of the component opened in the dialog, from the MdDialogRef instance returned in the MdDialog.open() method call.

dialogRef = this.dialog.open(PizzaDialog, config)
dialogRef.componentInstance.<property_name>

Modified Pizza from the github material2 docs angular material doc

@Component({
  selector: 'pizza-component',
  template: `
  <button type="button" (click)="openDialog()">Open dialog</button>
  `
})
export class PizzaComponent {

  constructor(public dialog: MdDialog) { }

  openDialog() {
    let config = new MdDialogConfig();
    let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config);
    dialogRef.componentInstance.name = "Ham and Pineapple";
    dialogRef.componentInstance.size = "Large";
  }
}

@Component({
  selector: 'pizza-dialog',
  template: `
  <h2>{{name}}</h2>
  <p>Size: {{size}}</p>
  <button type="button" (click)="dialogRef.close('yes')">Yes</button>
  <button type="button" (click)="dialogRef.close('no')">No</button>
  `
})
export class PizzaDialog {
  name:string;
  size:string;
  constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}

这篇关于如何将服务变量传递到 Angular Material 对话框中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！