Question

我试图将一些JavaScript Polymer元素移植到AngularDart。

我需要能够做相当于if(response.success === true)的事情（对于那些不熟悉Polymer的人来说，基本上是this.$.contentContainer.getBoundingClientRect();）。

我还需要能够访问host元素来执行诸如component.getElementById("contentContainer").getBoundingClientRect()之类的事情，其中window.getComputedStyle(this).direction是主机元素。

通常如何在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') ElementRef cc;

  ngAfterViewInit() {
    (cc.nativeElement as HtmlElement)....
  }
}

另请参阅angular 2 / typescript : get hold of an element in the template（适用于Dart并进行微小更改，例如右侧的类型和{}中的可选参数）

如何在AngularDart中访问DOM？

2 个答案: