angular之Input和Output

Input

一个装饰器，用来把某个字段标记为输入属性，该输入属性会绑定到模板中的某个DOM属性。当变更检测的时候，angular会自动使用这个DOM属性的值来更新此数据属性。
1：格式

@Input(bindingPropertyName:string | undefined):any;

2：使用

//父组件
<test-child [title]="childTitle" child-id="1"></test-child>
//子组件
@Input() title='';
@Input('child-id') id='';

上述id就是起的child-id的别名，在子组件中就会使用id代替child-id。
同时我们还可以把Input和set/get结合起来使用，拿到title值之后做一些操作。

//子组件
@Input() set title(value:string){
  this.otherTitle =value;
}

Output

一个装饰器，用于把一个类字段标记为输出属性。借助EventEmitter来进行子组件往父组件传递内容。
在子组件中创建一个EventEmitter的实例作为输出属性，在父组件中通过事件绑定的方法监听，当子组件调用输出属性.emit(把吧啦吧啦)的时候，父组件就会接受到该消息。

//子组件
@Output() titleNm:EventEmitter<string> = new EventEmitter<string>();
ngOnInit() {
  this.titleNm.emit('吧啦吧啦');
}
//父组件
<app-test-child (titleNm)="titleNmValue($event)"></app-test-child>
titleNmValue(nm:string):void {
  console.log(nm);
}