如何通知家长有关儿童部件的变化？

我有此模板的子组件：如何通知家长有关儿童部件的变化？

<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请求从服务器获取用户，所以在加载数据时，用户显示。

如何通知父组件数据已加载并显示？

来源

2016-11-09 andrew554

什么你由家长意思？ –

父组件 – andrew554

使用输出。请参阅https://angular.io/docs/js/latest/guide/template-syntax.html#!#inputs-outputs。 '' –

只需在子组件中使用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方法，您可以在其中执行任何您想要的操作。

见Angular.io docs Component Interaction 文章了解更多信息

来源

2016-11-09 22:00:48 jirigracik

如何通知家长有关儿童部件的变化？

回答

相关问题