[Angular] 使用 @ViewChild 取得操作 DOM 屬性

在使用 Angular 開發時因為已內建基本的資料繫結功能，我們只要在 html 範本中依照繫結語法即可簡單快速地完成對指定的 DOM 物件完成繫結，只要變更 component.ts 的資料內容，DOM 的值就會跟著變動，不用像使用 jquery 需要先一個一個取得指定物件在對其操作，這對常需要使用動態表格的功能開發上減少了許多負擔，但有時候我們還是會依照需求在某個時間對單獨的 DOM 物件進行操作或取得屬性值來判斷，例如使用 fabric.js，等需要對 canvas 設定大小的操作，通常我們不會寫死，而是依照其上一層的 div 元素大小來動態設定 canvas 畫布大小，這時候我們可以用 @ViewChild 屬性裝飾器來於 component.ts 操作 DOM 物件內容。

使用說明

示範使用 fabricjs 依照動態寬高設定 canvas 大小

app.component.scss

.viewport {
     width: 100%;
     height: calc(100vh - 250px);
}

app.component.html

    <div #viewport class="viewport">
      <canvas id="canvas" style="border:1px dashed"></canvas>
    </div>

app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Canvas } from 'fabric/fabric-impl';
import { fabric } from 'fabric';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private canvas: Canvas;

 @ViewChild('viewport', { static: true }) viewportDOM: ElementRef;

  constructor() { }

  ngOnInit(): void {
  
  this.canvas = new fabric.Canvas('canvas');
  this.canvas.setWidth(this.viewportDOM.nativeElement.offsetWidth);
  this.canvas.setHeight(this.viewportDOM.nativeElement.offsetHeight);
  this.canvas.renderAll();
  }
}