[Angular] 使用範本參考變數存取 Child Component

Angular 的架構基本上就是 Component 包 Component，所以常常會有情況存取 Component 底下的 Component 一些資源，而只要用範本參考變數，就能很輕易達到這樣的功能。

說明

首先我有一個 ProfileComponent ，程式碼如下

ProfileComponent

• ts

import { Component } from '@angular/core';

@Component({
  selector: 'profile',
  templateUrl: 'app/profile.component.html'
})
export class ProfileComponent {
  name = 'Miles';
}

而我的 app.component.html 會加入 ProfileComponent，且 ProfileComponent 加入範本參考變數 #profile

AppComponentHtml

• html

<profile #profile></profile>

My name is {{profile.name}}

用這種方式就能把 Child Component 當作一個實體來使用，直接呼叫 Property 或方法。

參考

[Access Child Components From the Template]