我有一个包含此模板的子组件:
<p *ngIf="user != null" >
Id: {{user.id}}<br>
Name: {{user.firstName}} {{user.lastName}}<br>
Nick: {{user.nickname}}<br>
Gender: {{user.gender}}<br>
Birthday: {{user.birthday}}<br>
Last login: {{user.lastUpdateDate}}<br>
Registered: {{user.registrationDate}}<br>
</p>
我使用http请求从服务器获取用户,因此在加载数据时,会显示用户。
如何通知父组件数据已加载并显示?
答案 0 :(得分:14)
只需在子组件中使用EventEmitter
(此示例适用于click事件,您可以随时发出事件)。
@Component({
selector: 'child-component',
template: `
<button (click)="changeStatus(true)">Finish</button>
`
})
export class ChildComponent {
@Output() onStatusChange = new EventEmitter<boolean>();
changeStatus(finished: bool) {
this.onStatusChange.emit(finished);
...
}
}
@Component({
selector: 'parent-component',
template: `
<child-component
(onStatusChange)="childStatusChanged($event)">
</child-component>
`
})
export class ParentComponent {
childStatusChanged(finished: boolean) {
if (finished){
...
}
...
}
}
当您点击Finish
按钮时,它会调用子changeStatus
方法,我们会在其中发出子onStatusChange
事件。它可能在父级中捕获,如父组件的模板中所示。这将调用childStatusChanged
方法,您可以在其中执行任何操作。
请参阅 Component Interaction Angular.io docs中的文章了解更多信息