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

Question

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

有什么想法吗？谢谢你 。

#user 对话框组件代码

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

要访问对话框组件中的数据，您必须使用 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 {
  }

}

欲了解更多信息