除了可以使用 DataBinding 取得物件上的資料外，還可以使用 Angular Local Reference 取該物件的 value以及相關屬性，Local Reference 可以 直接被 Template 上的任何 物件直接被使用

模板變數

如果想直接使用 DOM 節點的話都得先給相應的DOM節點設定模板變數。 其實就是在DOM 上加 #變數名稱
例如下面的 testLabel 就是一個模板變數。

<div #testLabel>cba</div>

server.component.html

<div class="row">
  <div class="col-xs-12">
    <p>Add new Servers or blueprints!</p>
    <label>Server Name</label>
    <input type="text" class="form-control" #serverNameInput />
    <label>Server Content</label>
    <br />
    <button class="btn btn-primary" (click)="onAddServer(serverNameInput)">
      Add Server
    </button>
  </div>
</div>

在 template 上透過 #serverName 將該 Input 中的 DOM 以及相關 bidning的資訊傳到 onAddServer 中

server.component.ts

export class CockpitComponent implements OnInit {
  constructor() { }

  ngOnInit() { }

  onAddServer(nameInput: HTMLInputElement) {
    console.log(nameInput);
  }
}

可以透過 console 看 取到的 DOM 資訊

使用裝飾器 ViewChild

也可以使用 ViewChild 裝飾器達到一樣的效果，用於從模板檢視中獲取匹配的元素。需要注意的是@ViewChild和 hook 方法ngAfterViewIni t呼叫之前賦值。接下來我們來看下@ViewChild怎麼使用。

cockpit.component.html

<div class="row">
  <div class="col-xs-12">
    <p>Add new Servers or blueprints!</p>
    <label>Server Name</label>
    <label>Server Content</label>
    <input type="text" class="form-control" #serverContentInput />
    <br />
    <button class="btn btn-primary" (click)="onAddServer()">
      Add Server
    </button>
  </div>
</div>

cockpit.component.ts

xport class CockpitComponent implements OnInit {
  newServerName = '';
  newServerContent = '';
  @ViewChild('serverContentInput', { static: true }) serverContent: ElementRef;
  constructor() { }

  ngOnInit() { }

  onAddServer() {
    console.log(this.serverContent.nativeElement);
  }
}

參考

1. Angular 正確使用 @ViewChild、@ViewChildren 訪問 DOM、元件、指令