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

Relativley新角度和飞镖我有以下问题：如何在Angular 2 Dart中通过ID选择模板元素？

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？

来源

2017-01-30 Blackbam

这要看'＃我-canvas'来自以及它是如何创建的。您的问题不包含任何有关的信息。根据你的编辑，它是组件模板的一部分，否则'@ViewChild（）'不起作用 - 但@ViewChild（）不是“按ID选择”。所以我对你的答案有点困惑。 –

是它的组件模板的一部分。然而，对于querySelector，元素仍然是“空”。是否有另一种通过ID选择的可能性？错过了什么可能？ – Blackbam

我更新了我的答案。这应该工作。但'@ViewChild（）'通常是更好的用例。 –

移动代码来ngAfterViewInit()

class MyComponent implements AfterViewInit { 

    @ViewChild("mapCanvas") 
    ElementRef canvas; 

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

当执行构造，不存在但为组件创建DOM。

编辑：正确但元素仍然为空。现在在以ViewChild注解的Angular绑定方式访问它之后工作。

<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"); 

    } 
}

来源

2017-01-30 14:57:36

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

回答

相关问题