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);

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

 

Angular中,子组件可以通过@Input装饰器接收父组件递过来的。首先,在父组件中,我们需要使用export关键字将要递的暴露出来。例如,在父组件中定义了一个title属性和一个run方法,我们可以将它们递给子组件。在父组件的模板中,使用方括号语法将这些递给子组件。例如,使用\[title\]="title"和\[run\]="run"将title和run递给子组件。在子组件中,我们需要导入Input装饰器,并使用@Input装饰器来接收父组件递过来的。例如,在子组件的类中,使用@Input()装饰器来接收父组件递过来的title和run。然后,我们可以在子组件的模板中使用这些。例如,使用{{title}}来显示title的,并使用(click)="run()"来调用run方法。这样,子组件就可以接收并使用父组件递过来的了。\[1\] 另外,如果想在子组件中调用父组件的方法,可以在子组件中定义一个方法,并在该方法中调用父组件递过来的方法。首先,在子组件中使用@Input装饰器接收父组件递过来的方法。例如,在子组件的类中,使用@Input()装饰器来接收父组件递过来的getDataFromChild方法。然后,在子组件中定义一个方法,例如sendParent方法,通过调用getDataFromChild方法来调用父组件的方法。这样,子组件就可以调用父组件的方法了。\[2\]\[3\] #### 引用[.reference_title] - *1* [angular组件](https://blog.csdn.net/m0_61260987/article/details/127222400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Angular子组件父组件](https://blog.csdn.net/qq_43579525/article/details/83935694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值