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

說明

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

ProfileComponent
  • ts
1
2
3
4
5
6
7
8
9
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
1
2
3
<profile #profile></profile>

My name is {{profile.name}}

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

參考

[Access Child Components From the Template]