当前位置: 代码迷 >> 综合 >> angular2+ modal向父组件传值
  详细解决方案

angular2+ modal向父组件传值

热度:73   发布时间:2023-11-17 06:03:19.0

需求:ngalain 和 ng-zorro 只提供了关闭事件向父组件传值,但我需要的是弹窗打开时,点击列表某一行即向父祖件传当前行信息

新建modal.service.ts

import { EventEmitter, Injectable } from '@angular/core';
// 从根注入
@Injectable({providedIn: 'root',
})// 这种写法需要在x.module.ts providers 里注入
// @Injectable()export class ModalServcie {private modal_emitter = new EventEmitter();constructor() {}getModalEmitter() {return this.modal_emitter;}emitModalData(data) {this.modal_emitter.emit(data);}
}

modal.component.ts 弹窗里调用:

import { ModalServcie } from '@shared/services/modal.service';export class SearchTagsComponent implements OnInit {constructor(private modalServcie: ModalServcie) {}tags = [];addTags() {this.modalServcie.emitModalData(this.tags);}
}

父组件里接受:

import { ModalServcie } from '@shared/services/modal.service';
import { ModalHelper } from '@delon/theme';
import { ModalComponent } from '../modal/modal.component';constructor(private modalServcie: ModalServcie,private subject: ModalHelper) {// 订阅弹窗里事件this.modalServcie.getModalEmitter().subscribe(data => console.log(data));
}addTag() {// 创建弹窗this.subject.create(ModalComponent);// 不能在这里订阅弹窗里事件,会订阅多次!!
}

 

  相关解决方案