angular - 如何在 Angular 2 Dart 中通过 ID 选择模板元素？

Question

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

我的组件.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....
  }
}

我的组件.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。

编辑:正确但 Element 仍然为空。以Angular绑定(bind)的方式通过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");

  }
}