免费AI编程助手
Angular4 开发实战：(5） 组件通讯(@Input和@Output)
- 父到子
- 子到父
@Input()属性装饰器来实现。
我们依旧使用CardComponent和CardHeaderComponent两个组件：
// app/components/card-header/card-header.component.ts
@Input() title: string;
// app/components/card-header/card-header.component.html
<div class="card-header">
{{title}}
</div>
// app/demo/demo-input/demo-input.component.html
<app-card>
<app-card-header [title]="'这是Input输入'"></app-card-header>
</app-card>
@Input()属性装饰器来声明输入属性tilte，然后就像内置属性一样将值赋值给[title]。
注：@Input() 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input() 装饰器后面的属性名：
@Input('bindingPropertyName')
// card-header.component.ts
@Component({
inputs:['content']
})
export class CardHeaderComponent {
content: string;
}
// card-header.component.html
<app-card>
<app-card-header [content]="'这是另外一种方式声明输入属性'"></app-card-header>
</app-card>
@Component({
inputs:['stateActive:name2']
})
@Input()来声明输入属性。
setter & getter方法
Angular还为输入属性提供了setter和getter方法，可以让我们对输入属性值进行一些操作：
// card-header.component.ts
export class CardHeaderComponent {
_count: number;
@Input()
set count(value: number) {
this._count = value + 1;
}
get count(): number {
return this._count;
}
}
// card-header.component.html
<div>数字：{{_count}}</div>
_count)来赋值。
(2) 子到父的数据传递
通过事件绑定，我们就可以实现子组件向父组件传递数据，一般我们使用@Output()属性装饰器来实现。
实现步骤：首先需要在子组件中定义事件（使用EventEmitter方法），子组件的事件被触发时引发父组件的事件响应，同时将事件参数传递给父组件的响应函数，这样就完成了子组件向父组件传递数据。
我们创建CardFooterComponent：
// card-footer.component.ts
@Output() onChange: EventEmitter<string> = new EventEmitter();
onBlur(value: string) {
this.onChange.emit(value); // 传播事件
}
// card-footer.component.html
<input type="text" (change)="onBlur($event.target.value)">
// demo-input.component.html
<app-card>
<app-card-footer (onChange)="onChange($event)"></app-card-footer>
</app-card>
// demo-input.component.ts
onChange(event: any) {
alert(event);
}
@Output()定义了一个输出属性，然后在使用时就可以像内置事件一样使用(onChange)="onChange($event)"。当input失去焦点时，我们就能获取到值。
在上一章“属性和事件绑定”中讲过，每一个Angular事件监听函数都有一个$event参数，而自定义事件的参数也就是emit()中传递的参数。
注：@Output() 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Output 装饰器，装饰的属性名：
@Output('bindingPropertyName')
@Component({
outputs:['onChange']
})
onChange: EventEmitter<string> = new EventEmitter();
@Component({
outputs:['stateChange:change']
})
@Output()来声明输入属性。
如发现任何问题或有好的建议，欢迎在下方评论留言。
更多建议：