组件之@Input & @Output

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();
}
//home.html
```
- 还可以在组件元数据中使用inputs、outputs来设置输入输出属性

//test.ts
@Component({
// ...
inputs: ['data'],
outputs: ['onChange']
})
export class TestComponent {
data: string;
onChange = new EventEmitter();
// ...
}

如果需要给输入/输出属性取别名
- 在组件内

//test.ts
export class TestComponent {
@Input('myData') data: string;
@Output() onChange = new EventEmitter();
// ...
}

或
- 在inputs和outputs数组中，可以写一个：分隔的字符串，左侧是指令中的属性名，右侧是公开的别名

outputs:['onChange:myOnChange']

#### 父组件向子组件传递数据
父组件的数据通过子组件的输入属性流入子组件，在子组件完成接收或拦截，以此实现数据由上而下的传递。

//test.ts
@Component({
selector: 'test-page',
template:

{{data}}

})
export class TestComponent {
@Input() data: string;
@Output() onChange = new EventEmitter();
// ...
}

//home.html

在home父组件中，定义data变量，通过home.html，模板输入绑定[data]将父组件的data传入到子组件中，子组件通过@Input()完成数据的接收
####子组件向父组件传递数据
使用事件传递是子组件向父组件传递数据最常用的方式。子组件需要实例化一个用来订阅和触发自定义事件的EventEmitter类，这个实例对象是一个由装饰器@Output修饰的输出属性，当有用户操作行为发生时，该事件会触发，父组件则通过事件绑定的方式来订阅来自子组件触发的事件。

//home.html

//home.ts
data: number = 123456789;
onChange(s: number) {
console.log("传回的数据："+s);
}

//test.html
点击{{data}}

//test.ts
@Input() data: number;//接收父组件传入的数据
@Output() onChange = new EventEmitter();
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:
})
export class HomeComponent {
names = ['Mr. IQ', ' ', ' Bombasto '];
}

//test.ts
@Component({
selector: 'test-page',
template: '

"{{name}}"

'
})
export class TestComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '';
}
get name(): string { return this._name; }
}
log输出：
Mr. IQ

Bombasto

后来再看官网，发现官网文档上写的非常清楚，简直尴尬了，-。-。
[官网组件通讯地址](https://angular.cn/docs/ts/latest/cookbook/component-communication.html)