Angular 6 - MatDialog - EventEmitter - 从MatDialog向父组件共享对象
创始人
2024-10-16 01:30:41
0

要从MatDialog向父组件共享对象,可以使用EventEmitter来实现。以下是一个示例代码:

在父组件中,定义一个属性来接收从MatDialog传递的对象:

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

@Component({
  selector: 'app-parent',
  template: `
    
    

从对话框接收到的对象:{{ receivedObject }}

` }) export class ParentComponent { receivedObject: any; openDialog() { // 打开MatDialog,并传递数据 const dialogRef = this.dialog.open(DialogComponent); dialogRef.afterClosed().subscribe(result => { this.receivedObject = result; // 接收从对话框返回的对象 }); } }

在对话框组件中,定义一个Output属性并使用EventEmitter来发出事件,将对象传递给父组件:

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

@Component({
  selector: 'app-dialog',
  template: `
    
    
  `
})
export class DialogComponent {
  @Output() objectShared = new EventEmitter();

  closeDialog() {
    this.dialogRef.close();
  }

  shareObject() {
    const object = { name: '对象名称', value: '对象值' };
    this.objectShared.emit(object); // 发出事件,将对象传递给父组件
  }
}

在父组件中,使用子组件的Output属性来监听事件,并在事件处理函数中接收从对话框传递的对象:

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

@Component({
  selector: 'app-parent',
  template: `
    
    

从对话框接收到的对象:{{ receivedObject }}

` }) export class ParentComponent { receivedObject: any; openDialog() { // 打开MatDialog,并传递数据 const dialogRef = this.dialog.open(DialogComponent); dialogRef.componentInstance.objectShared.subscribe(object => { this.receivedObject = object; // 接收从对话框返回的对象 }); } }

这样,当在对话框中点击"共享对象"按钮时,会将一个对象传递给父组件,并在父组件中显示出来。

相关内容

热门资讯

科技分享!aapoker插件,... 这是一款非常优秀的德扑圈有透视吗 ia辅助检测软件,能够让你了解到德扑圈有透视吗中牌率当中全部隐藏参...
总算了解!wepoker透视苹... 总算了解!wepoker透视苹果系统,约局吧开挂神器是真的吗,必备教程(有挂方法);最新版2024是...
推荐十款!aapoker透视插... 1、推荐十款!aapoker透视插件,德州私人局怎么透视,AI教程(有挂攻略);详细教程。2、德州私...
科技介绍!pokemmo辅助官... 1、科技介绍!pokemmo辅助官网,约局吧是否有挂,透牌教程(有挂透视)2、进入游戏-大厅左侧-新...
总算了解!大菠萝手游辅助,we... 总算了解!大菠萝手游辅助,wepoker破解器,辅助教程(有挂技巧);玩家必备必赢加哟《136704...
推荐十款!hhpoker到底可... 推荐十款!hhpoker到底可以作弊吗,impoker辅助,教你教程(有挂软件)是由北京得hhpok...
重磅来袭!cloudpoker... 重磅来袭!cloudpoker作弊,hhpoker德州作弊,2025新版教程(有挂技巧)准备好在hh...
避坑细节!佛手在线大菠萝辅助,... 避坑细节!佛手在线大菠萝辅助,hhpoker到底可以作弊吗,解密教程(有挂辅助);科技安装教程;13...
重大通报!hhpoker外挂靠... 重大通报!hhpoker外挂靠谱吗,wepoker辅助透视,可靠技巧(有挂透视);亲真的是有正版授权...
来一盘!德州局怎么透视,智星菠... 1、来一盘!德州局怎么透视,智星菠萝透视,可靠教程(有挂方法)。2、德州局怎么透视透视辅助简单,德州...