如何在 Angular 2 Dart 中通过 ID select 模板元素？

Question

Angular 和 Dart 的相对新手我有以下问题：

my_component.dart:

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';

import 'package:google_maps/google_maps.dart';
import 'dart:html';


@Component(
  selector: 'google-route-map',
  styleUrls: const ['my_component.css'],
  templateUrl: 'my_component.html',
  directives: const [materialDirectives],
  providers: const [materialProviders],
)
class MyComponent {

  MyComponent() {

    var m = querySelector("#my-canvas");

    print (m); // is null

    // do something with m....
  }
}

my_component.html:

<div id="my-canvas"></div>

据我所知，问题是 querySelector 查询 仅基 dom 而不是 shadowDom。

但是，我如何简单地查询模板中的 ID？

Answer 1

将代码移至ngAfterViewInit()

class MyComponent implements AfterViewInit {

  @ViewChild("mapCanvas")
  ElementRef canvas;

  @override
  void ngAfterViewInit() {
    DivElement m = canvas.nativeElement;
    ...
  }
}

执行构造函数时，尚未为组件创建 DOM。

编辑：正确但元素仍然为空。现在可以通过 Angular 与 ViewChild 注释绑定的方式访问它。

<div #mapCanvas></div>

更新

<div id="my-canvas"></div>

class MyComponent implements AfterViewInit {
  ElementRef _elementRef;

  MyComponent(this._elementRef);

  @override
  void ngAfterViewInit() {
    var canvas = _elementRef.nativeElement.querySelector("#my-canvas");

  }
}

更新 AngularDart 5

<div id="my-canvas"></div>

class MyComponent implements AfterViewInit {
  Element _element;

  MyComponent(this._element);

  @override
  void ngAfterViewInit() {
    var canvas = _element.querySelector("#my-canvas");

  }
}

Answer 2

根据 AngularDart Gitter 频道最近的讨论，在 AD5 中执行此操作的一个好方法是：

@ViewChild(‘someRef’, read: HtmlElement)
CanvasElement someRefCanvas;

...或者如果 ViewChild 的设置发生在视图初始化之后（例如涉及 *ngIf），您可以使用 setter:

@ViewChild(‘someRef’, read: HtmlElement)
set someRefCanvas(CanvasElement e) {

}

如何在 Angular 2 Dart 中通过 ID select 模板元素？

How to select template element by ID in Angular 2 Dart?

dart

dart-html

angular2-dart

angular