04 컴포넌트 상호작용 06

부모는 @ViewChild()를 호출합니다.

지역 변수 접근법은 간단하고 쉽습니다. 하지만 부모-자식 연결작업은 부모 템플릿이 완벽히 처리해야 하기 때문에 한계가 있습니다. 부모 컴포넌트 자체는 자식에 접근 할 수 없다.

부모 컴포넌트 클래스의 인스턴스가 하위 컴포턴트 값을 읽거나 쓰거나 자식 컴포넌트 메서드를 호출해야하는 경우 로컬 변수 기술을 사용할 수 없습니다.

부모 컴포넌트 클래스가 그러한 종류의 액세스를 필요로 할 때, 부모 클래스에 자식 컴포넌트를 ViewChild로 주입하십시오.

다음 예제는 동일한 카운트 다운 타이머 예제를 사용하여 이 기법을 보여줍니다. 외관이나 행위가 바뀌지는 않습니다. 자식 CountdownTimerComponent도 동일합니다.

다음은 부모 컴포넌트인 CountdownViewChildParentComponent입니다.

component-interaction/src/app/countdown-parent.component.ts

import { AfterViewInit, ViewChild } from '@angular/core'; import { Component }                from '@angular/core'; import { CountdownTimerComponent }  from './countdown-timer.component';   @Component({   selector: 'countdown-parent-vc',   template: `   <h3>Countdown to Liftoff (via ViewChild)</h3>   <button (click)="start()">Start</button>   <button (click)="stop()">Stop</button>   <div class="seconds">{{ seconds() }}</div>   <countdown-timer></countdown-timer>   `,   styleUrls: ['demo.css'] }) export class CountdownViewChildParentComponent implements AfterViewInit {     @ViewChild(CountdownTimerComponent)   private timerComponent: CountdownTimerComponent;     seconds() { return 0; }     ngAfterViewInit() {     // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...     // but wait a tick first to avoid one-time devMode     // unidirectional-data-flow-violation error     setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);   }     start() { this.timerComponent.start(); }   stop() { this.timerComponent.stop(); } }

부모 컴포넌트 클래스가 자식 뷰를 가져 오기 위해서는 몇 가지 작업이 필요합니다.

먼저 ViewChild 데코레이터와 AfterViewInit 라이프 사이클 후크에 대한 참조를 가져와야합니다.

그런 다음 @ViewChild 프로퍼티 데코레이션을 통해 자식 timerInfoComponent를 프라이빗 timerComponent 프로퍼티에 삽입합니다.

#timer 로컬 변수는 컴포넌트 메타 데이터에서 제외되었습니다. 대신 버튼을 부모 컴포넌트 자체의 start 및 start 메소드에 바인드하고 부모 컴포넌트의 seconds 메소드 주위에 보간법으로 눈금 초를 표시합니다.

이 메소드는 주입 된 타이머 컴포넌트를 직접 액세스합니다.

ngAfterViewInit() 라이프 사이클 후크는 중요한 부분입니다. Angular가 부모 뷰를 표시 할 때까지 타이머 컴포넌트를 사용할 수 없습니다. 따라서 처음에는 0 초가 표시됩니다.

그런 다음 Angular가 ngAfterViewInit 라이프 사이클 후크를 호출하면 부모뷰의 카운트 다운 초 표시를 업데이트하기에는 너무 늦습니다. Angular의 단방향 데이터 흐름 규칙은 동일한주기에서 상위보기를 업데이트하지 못하게합니다. 앱은 초를 표시하기 전에 한 번 기다려야합니다.

setTimeout()을 사용하여 한 번 눈금을 기다린 다음 seconds() 메서드를 수정하여 타이머 컴포넌트에서 이후 값을 가져옵니다.