angular2+ modal向父组件传值

需求: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);

    // 不能在这里订阅弹窗里事件,会订阅多次!!
}

 

你可能感兴趣的:(angular8,angular2,前端)