如何从 angular 中的对话框组件传递和访问数据？

Question

我有两个组件 Component A 和 UserActivationDialogComponent。我根据下面的代码将数据从组件 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);
      }
    });
  }

Answer 1

To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token:

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

如何从 angular 中的对话框组件传递和访问数据？

How to pass and access data from a dialog component in angular?

dialog

typescript

angular