目录
https://angular.cn/guide/component-interaction官方文档
https://blog.csdn.net/u012967849/article/details/78767294
在该实例中牵扯到的父子文件。
父组件:parent.component.html; parent.component.ts
子组件:child.component.html; child.component.ts
一、通过输入型绑定把数据从父组件传到子组件。
@Input :
父组件给子组件属性值;父组件用子组件的属性值和方法建议用@ViewChild,若用@Input可能需要做数据拦截。
将父作用域中的值“输入”到子作用域中,之后子作用域进行相关处理
@Output :
子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件“输出”到父作用域中,在父作用域中处理。
Output一般都是一个EventEmitter的实例,使用实例的emit方法将参数emit到父组件中,触发父组件中对应的事件。
parent.component.html文件中:
<app-child [groupIdName]="serviceSelected?.group_id" (addSuccess)="addSuccessEvent()"></app-child>
child.component.ts文件中:
export class AddServiceComponent {
// 子组件暴露一个 EventEmitter 属性
@Output() addSuccess = new EventEmitter();
// @Input为子组件的属性名groupId指定一个别名groupIdName
@Input('groupIdName') groupId: number;
constructor(private http: HttpClient) {}
handleOk(){
this.http.post(url, params).subscribe(
() => {
this.message.success(this.serviceAddData.id ? '编辑成功' : '添加成功');
this.addSuccess.emit();
this.handleCancel();
this.addForm.form.reset();
}
)}
// 在子组件中使用父组件传递过来的值
open(data = {}) {
this.serviceAddData = Object.assign({
name: '',
ability_ids: [],
group_id: this.groupId
}, data);
}
}
二、父组件监听子组件的事件
子组件暴露一个 EventEmitter
属性,当事件发生时,子组件利用该属性 emits
(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。
子组件的 EventEmitter
属性是一个输出属性,通常带有@Output 装饰器,就像在 VoterComponent
中看到的。
三、通过 setter 截听输入属性值的变化
使用一个输入属性的 setter,以拦截父组件中值的变化,并采取行动。
子组件 NameChildComponent
的输入属性 name
上的这个 setter,会 trim 掉名字里的空格,并把空值替换成默认字符串。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-name-child',
template: '<h3>"{
{name}}"</h3>'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name(): string { return this._name; }
}