如何在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選擇模板元素？

回答

相關問題