如何在 AngularDart 中訪問 DOM？

Question

我正在嘗試將一些 JavaScript Polymer 元素移植到 AngularDart。

我需要能夠做相當於this.$.contentContainer.getBoundingClientRect(); （對於那些不熟悉基本上是component.getElementById("contentContainer").getBoundingClientRect()的 Polymer 的人）。

我還需要能夠訪問宿主元素以執行諸如window.getComputedStyle(this).direction之類的操作，其中this是宿主元素。

在 AngularDart 中通常如何完成這樣的事情？

Answer 1

您可以注入一個名為ElementRef的對象：

import 'dart:html';

class Comp {
  final ElementRef _elementRef;

  Comp(this._elementRef) {
    final element = _elementRef.nativeElement as Element;
    element.getComputedStyle(); // ...
  }
}

在 AngularDart 4.x 中，我們將允許您直接注入Element 。

Answer 2

或者，您可以使用@ViewChild()獲取對特定元素的引用

@Component(
  selector: 'my-component',
  template: '''
<div #contentContainer></div>
'''
)
class MyComponent implements AfterViewInit {
  @ViewChild('contentContainer') HtmlElement cc;

  ngAfterViewInit() {
    cc....
  }
}

另請參閱如何在組件模板中選擇元素？ （這適用於 Dart，但有一些細微的變化，例如右側的類型和{}中的可選參數）