Как выбрать элемент шаблона по ID в Angular 2 Dart?

Question

Relativley новый для угловых и Дарта у меня есть следующая проблема:

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.

Как я могу просто запросить идентификатор внутри моего шаблона?

Answer 1

Переместить код ngAfterViewInit()

class MyComponent implements AfterViewInit { 

    @ViewChild("mapCanvas") 
    ElementRef canvas; 

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

Когда конструктор выполняется, нет DOM создан еще для компонента.

РЕДАКТИРОВАТЬ: Правильно, но элемент по-прежнему равен нулю. Теперь работает после доступа к нему в виде привязки по углу с аннотацией 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"); 

    } 
}