Как уведомить родителя об изменении дочернего компонента?

Question

У меня есть ребенок компонент с этим шаблоном:

<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, поэтому при загрузке данных, пользователь отображается.

Как я могу сообщить родительскому компоненту, что данные были загружены и показаны?

Answer 1

Просто используя 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 для получения дополнительной информации