如何以角度从对话框组件传递和访问数据？答案

【问题标题】：How to pass and access data from a dialog component in angular?如何以角度从对话框组件传递和访问数据？
【发布时间】：2021-07-25 13:53:01
【问题描述】：

我有两个组件 Component A 和 UserActivationDialogComponent。我将基于以下代码的数据从 Componet A 传递到 UserActivationDialogComponent。如何访问我的 UserActivationDialogComponent 上的数据？

伙计们有什么想法吗？谢谢。

#用户对话框组件代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-activation-dialog',
  templateUrl: './user-activation-dialog.component.html',
  styleUrls: ['./user-activation-dialog.component.css']
})
export class UserActivationDialogComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

#触发对话框后的代码

activateUserDialog(status:string) {
    const dialogRef = this.dialog.open(UserActivationDialogComponent, {
      disableClose: true,
      data: {
        status: status,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.updateUserProfileStatus(this.data.id);
      }
    });
  }

【问题讨论】：

标签： angular typescript dialog

【解决方案1】：

要访问对话框组件中的数据，您必须使用 MAT_DIALOG_DATA 注入令牌：

import { Component, OnInit,Inject } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-user-activation-dialog',
  templateUrl: './user-activation-dialog.component.html',
  styleUrls: ['./user-activation-dialog.component.css']
})
export class UserActivationDialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: {status: string}) { }

  ngOnInit(): void {
  }

}

For More Info

【讨论】：