Angular提供了输入（@Input）和输出（@Output）语法来处理组件数据的流出流出。
Angular官网
被@Input修饰的变量属于输入属性，输入属性接收数据值，被@Output修饰的变量属于输出属性，输出属性暴露事件产生者，如EventEmitter对象。通常输出属性一般是以事件的形式，将数据通过EventEmitter抛出。
声明输入和输出属性的方式有两种
首先，需要在组件中引入Input、Output
import { Component, OnInit, Input, Output } from '@angular/core';
- 在组件内部，被装饰器标记成输入和输出属性
//test.ts
export class TestComponent {
@Input() data: string;
@Output() onChange = new EventEmitter<string>();
}
//home.html
<test-page [data]="data" (onChange)="onChange($event)" ></test-page>```
- 还可以在组件元数据中使用inputs、outputs来设置输入输出属性
//test.ts
@Component({
// ...
inputs: ['data'],
outputs: ['onChange']
})
export class TestComponent {
data: string;
onChange = new EventEmitter<string>();
// ...
}
如果需要给输入/输出属性取别名
- 在组件内
//test.ts
export class TestComponent {
@Input('myData') data: string;
@Output() onChange = new EventEmitter<string>();
// ...
}
或
- 在inputs和outputs数组中，可以写一个：分隔的字符串，左侧是指令中的属性名，右侧是公开的别名
outputs:['onChange:myOnChange']
#### 父组件向子组件传递数据
父组件的数据通过子组件的输入属性流入子组件，在子组件完成接收或拦截，以此实现数据由上而下的传递。
//test.ts
@Component({
selector: 'test-page',
template: <h1>{{data}}</h1>
})
export class TestComponent {
@Input() data: string;
@Output() onChange = new EventEmitter<string>();
// ...
}
//home.html
<test-page [data]="data" (onChange) = "onChange($event)" > </test-page>
在home父组件中，定义data变量，通过home.html，模板输入绑定[data]将父组件的data传入到子组件中，子组件通过@Input()完成数据的接收
####子组件向父组件传递数据
使用事件传递是子组件向父组件传递数据最常用的方式。子组件需要实例化一个用来订阅和触发自定义事件的EventEmitter类，这个实例对象是一个由装饰器@Output修饰的输出属性，当有用户操作行为发生时，该事件会触发，父组件则通过事件绑定的方式来订阅来自子组件触发的事件。
//home.html
<test-page [data]="data" (onChange)="onChange($event)" ></test-page>
//home.ts
data: number = 123456789;
onChange(s: number) {
console.log("传回的数据："+s);
}
//test.html
<a (click)="onChangeFn(data)" >点击{{data}}</a>
//test.ts
@Input() data: number;//接收父组件传入的数据
@Output() onChange = new EventEmitter<number>();
onChangeFn(s: number) {
console.log("点击按钮的数据："+s);
this.onChange.emit(s);
}
home父组件定义data数据以及onChange方法，将其传入子组件test中，test通过装饰器@Input接收data数据，并在模板中使用，test实例化该事件，并在点击元素后传入一个数据到onChangeFn方法中，最后通过this.onChange.emit(s)让父组件home中的自定义事件onChange执行，打印日志。
####@Input的setter拦截输入属性
getter和setter通常配套使用，用来对属性进行相关约束。
//home.ts
@Component({
// ...
template: <test-page *ngFor="let name of names" [name]="name"></test-page>
})
export class HomeComponent {
names = ['Mr. IQ', ' ', ' Bombasto '];
}
//test.ts
@Component({
selector: 'test-page',
template: '<h3>"{{name}}"</h3>'
})
export class TestComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name(): string { return this._name; }
}
log输出：
Mr. IQ
<no name set>
Bombasto
后来再看官网，发现官网文档上写的非常清楚，简直尴尬了，-。-。
[官网组件通讯地址](https://angular.cn/docs/ts/latest/cookbook/component-communication.html)
网友评论