본문 바로가기

Dev/angular

[angular] 템플릿 참조 변수 사용방법

이슈

부모 템플릿에서 자식 컴포넌트 함수를 사용하고 싶어졌습니다.

 

본문

- 부모 템플릿

<app-counter #counter></app-counter> <!-- 자식 태그를 선언할때 템플릿참조 변수 선언 -->
<button (click)="counter.increase()">button 1</button>
<button (click)="counter.decrease()">button 2</button>

 

- 자식템플릿

<h1>counter works! {{count}}</h1>

 

- 자식컴포넌트

export class CounterComponent implements OnInit {
  count: number = 0;

  constructor() { }

  ngOnInit() {
  }

  increase() {
    this.count++;
  }

  decrease() {
    this.count--;
  }
}

 

부모 템플릿에서, 자식 컴포넌트 선언부에 #counter  라는 템플릿참조 변수를 선언하면 자식컴포넌트에 접근할수 있습니다.

하지만 실제로는 부모 템플릿에서 자식 컴포넌트로 바로 접근은 잘 하지 않고, 아래와 같이 랩퍼를 통해 접근합니다.

 

- 부모 템플릿

<app-counter #counter></app-counter>
<button (click)="increase(counter)">button 1</button>
<button (click)="decrease(counter)">button 2</button>

 

- 부모 컴포넌트

import { Component } from '@angular/core';
import {CounterComponent} from './counter/counter.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'untitled1';
  increase(counter: CounterComponent) {
    counter.increase();
  }

  decrease(counter) {
    counter.decrease();
  }
}

 

결론

템플릿 참조 변수로 자식 컴포넌트에 접근할수 있다.

감사합니다