04 컴포넌트 상호작용 05

부모는 지역 변수를 통해 자식과 상호 작용합니다.

부모 컴포넌트는 데이터 바인딩을 사용하여 하위 속성을 읽거나 하위 메서드를 호출 할 수 없습니다. 두 요소 모두를 수행하려면 자식 엘리먼트에 대한 템플릿 참조 변수를 만든 다음 다음 예제와 같이 부모 템플릿 내에서 해당 변수를 참조하십시오.

다음은 0까지 카운트 다운하고 로켓을 발사하는 자식 CountdownTimerComponent입니다. 시계를 제어하는 ​​start 와 stop 메소드가 있으며 자체 템플릿에 카운트 다운 상태 메시지를 표시합니다.

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

import { Component, OnDestroy, OnInit } from '@angular/core';   @Component({   selector: 'countdown-timer',   template: '<p>{{message}}</p>' }) export class CountdownTimerComponent implements OnInit, OnDestroy {     intervalId = 0;   message = '';   seconds = 11;     clearTimer() { clearInterval(this.intervalId); }     ngOnInit()    { this.start(); }   ngOnDestroy() { this.clearTimer(); }     start() { this.countDown(); }   stop()  {     this.clearTimer();     this.message = `Holding at T-${this.seconds} seconds`;   }     private countDown() {     this.clearTimer();     this.intervalId = window.setInterval(() => {       this.seconds -= 1;       if (this.seconds === 0) {         this.message = 'Blast off!';       } else {         if (this.seconds < 0) { this.seconds = 10; } // reset         this.message = `T-${this.seconds} seconds and counting`;       }     }, 1000);   } }

타이머 컴포넌트를 사용하는 CountdownLocalVarParentComponent는 다음과 같습니다.

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

import { Component }                from '@angular/core'; import { CountdownTimerComponent }  from './countdown-timer.component';   @Component({   selector: 'countdown-parent-lv',   template: `   <h3>Countdown to Liftoff (via local variable)</h3>   <button (click)="timer.start()">Start</button>   <button (click)="timer.stop()">Stop</button>   <div class="seconds">{{timer.seconds}}</div>   <countdown-timer #timer></countdown-timer>   `,   styleUrls: ['demo.css'] }) export class CountdownLocalVarParentComponent { }

부모 컴포넌트는 자식의 start 및 stop 메서드 나 seconds 프로퍼티에 데이터를 바인딩 할 수 없습니다.

자식 컴포넌트를 나타내는 <countdown-timer> 태그에 지역 변수 인 #timer를 배치 할 수 있습니다. 그러면 자식 컴포넌트에 대한 참조와 부모 템플릿 내에서 해당 프로퍼티나 메서드에 액세스 할 수 있습니다.

이 예제에서는 부모 버튼을 자식의 start 및 stop에 연결하고 보간을 사용하여 자식의 seconds 프로퍼티를 표시합니다.

여기서 우리는 부모와 자식이 함께 작업하는 것을 봅니다.