하위 구성 요소의 변경 사항을 부모에게 알리는 방법은 무엇입니까?

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 버튼을 클릭하면, 우리가 아이에게 onStatusChange 이벤트를 방출 아이 changeStatus 메소드를 호출합니다. 부모 구성 요소의 템플릿에서 볼 수 있듯이 부모에서 잡힐 수 있습니다. 그러면 수행하려는 작업을 수행하는 childStatusChanged 메소드가 호출됩니다.

는 부모에 의해 무엇을 의미합니까 대한 추가 정보를 원하시면