背景：
最近在做前端angular项目时遇到父子组件通信的问题，通常父子组件通信的方式有很多，有@input，@output，@viewchild等，
接下来做一些总结如下：
@input:
@input装饰器通常用来父组件向子组件绑定时使用，用法也比较简单：
（1）通过@input装饰器直接使用：
父组件：
<input [(ngModel)]="input"/>
<app-demo [demoinput]="input"></app-demo>
子组件：@Input()demoinput
（2）@input通过别名去使用
父组件：
<input [(ngModel)]="input"/>
<app-demo [testinput]="input"></app-demo>
子组件：
@Input('testinput') input
<input [(ngModel)]="input" (input)="change()"/>（3）@使用set方法去监听
父组件：
<input [(ngModel)]="input"/>
<app-demo [testinput]="input"></app-demo>
子组件：
private test: any
@Input('testinput')
set testinput(test: number) {
this.test = test
}
<input [(ngModel)]="test" (input)="change()"/>@output
@output主要是子组件和父组件通信，把子组件的值回调给父组件，用法如下：
子组件：
@Output() output = new EventEmitter();//实例化output
change() {
this.output.emit(this.test)//回调
}
<input [(ngModel)]="test" (input)="change()"/>
父组件：
<input [(ngModel)]="input"/>
<app-demo [testinput]="input" (output)="test($event)" ></app-demo>
test(data){
this.input=data
}//通过回调赋值
通过@input和@output实现双向绑定
其实@input和@output可以实现对一个对象的双向绑定，如下：
子组件：
@Input('testinput')input
@Output('testinputChange') output = new EventEmitter();
change() {
this.output.emit(this.input)
}
<input [(ngModel)]="input" (input)="change()"/>
父组件：
<input [(ngModel)]="input"/>
<app-demo [(testinput)]="input" ></app-demo>
另外还可以通过@vewchild和service实现通信，你甚至还可以实体observalbe实现
链接：https://www.angular.cn/guide/component-interaction#intercept-input-property-changes-with-a-setter