吐血整理Angular8父子组件通信

背景：

最近在做前端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