訪問 host element

有時我們需要直接訪問元件的 host element。

例如，想要在點擊事件觸發時取得元素的相關資訊。

使用 ElementRef

Angular 提供了 ElementRef 類來訪問 DOM 元素：

1. ElementRef 是什麼：

• Angular 提供的一個封裝類 (class)

• 用於引用 DOM 元素

• 提供了對底層原生元素（nativeElement）的訪問

• 可以參照到任何渲染在頁面上的元素

1. 注入方式：

// 方式一：constructor 注入
constructor(private el: ElementRef) {}

// 方式二：inject 函數（推薦）
private el = inject(ElementRef);

1. 使用範例：

  private el = inject(ElementRef);

  onClick() {
    console.log(this.el);           // 印出整個 ElementRef 物件
    console.log(this.el.nativeElement);  // 訪問實際的 DOM 元素
  }
}

補充

1. ElementRef 的結構：

• el.nativeElement：直接訪問原生 DOM 元素

• 包含元素的所有屬性和方法

1. 使用注意事項：

• 盡量避免直接操作 DOM

• 優先使用 Angular 的資料綁定和指令

• 只在必要時才使用 ElementRef