如何通知家長有關兒童部件的變化？

我有此模板的子組件：如何通知家長有關兒童部件的變化？

<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

如何通知家長有關兒童部件的變化？

回答

相關問題