组件之间的通信是我们业务开发中少不了的,先了解下父子组件的通信
父组件传数据给子组件
前面，我们学会会动态属性的绑定，所以在父组件中给子组件绑定属性，在子组件中就可以使用这个属性了。
- 父组件中声明然后赋值
export class AppComponent {
money = 100;
}
<main class="main">
<p>Welcome to Angular!{{name}}</p>
<h3>下面是子组件的内容</h3>
<p>这是父组件的存款:{{money}}</p>
<app-user-list [childMoney]="money" />
</main>
- 子组件里面接受这个属性
注意，这里我们使用@Input()装饰器来接受这个属性。值类型必须保持一致，否则会报错。
import { Component, Input } from '@angular/core';
export class UserListComponent {
@Input() childMoney = 0;
}
显示父组件传过来的值
<p>
这里是子组件的money:{{childMoney}}
</p>
子组件传数据给父组件
- 子组件
<p>这里是子组件的money:{{childMoney}}</p>
<button (click)="handleAdd()">赚钱</button>
<button (click)="handledec()">花钱</button>
const core里面引入EventEmitter,用来发射事件。Output声明一个事件发射器，用来发射事件。
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Output() incrementCountEvent = new EventEmitter<number>();
handleAdd() {
this.incrementCountEvent.emit(1);
}
handledec() {
this.incrementCountEvent.emit(-1);
}
- 父组件
自定义事件，使用()绑定事件。接受参数，使用$event来接受。
<app-user-list [childMoney]="money" (incrementCountEvent)="handleChange($event)" />
handleChange($event: any) {
this.money += $event;
}
就完成了子组件向父组件的通讯。
