对于mdDialog,如何传入变量?具体来说,如何将Angular 服务注入到对话组件中?

推荐答案

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

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

来自github material2 docsangular 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相关问答推荐

Angular 信号效果,try 重置表单并获取在计算或效果中不允许写入信号"

无法执行客户端功能Angular 17与ssr'

元件不工作时的Angular 17属性 Select 器

命令不起作用的初始菜单项

将输入传递到组合Angular指令

以Angular 动态添加和删除组件形状元素

成Angular 的嵌套router-outlet

ANGLING HTTP.GET()返回包含数据的数组

Angular 17多内容投影错误

基于RxJS的Angular 服务数据缓存

当try 关闭浏览器选项卡时显示alert 时,我是否可以捕获用户是否取消警告

Angular 15 在 URL 中使用@进行路由

可观察的等待直到另一个可观察的值

Angular 2+ 一次性绑定

如何在 Angular 2 中正确设置 Http 请求标头

如何每隔一段时间发出 HTTP 请求?

NG2-Charts 无法绑定到 datasets,因为它不是 canvas的已知属性

如何以编程方式触发`valueChanges`?

Angular 2 可用的 yeoman 生成器

Angular 4 material表突出显示一行