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