So wählen Sie ein template-element mit ID in Eckigen 2-Dart?

Recht neue Schwenk-und Dart ich habe Folgendes problem:

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>

Soweit ich verstanden habe, das problem ist, dass querySelector Abfragen nur die Basis-dom-nicht die shadowDom.

Aber wie kann ich einfach eine Abfrage einer id, die in meiner Vorlage?

  • Es hängt davon ab, wo #my-canvas kommt und wie es erstellt wird. Deine Frage enthält nicht alle Informationen über, die. Nach dem edit ist es ein Teil von einem Komponenten-template sonst @ViewChild() würde nicht funktionieren - aber @ViewChild() ist nicht "select by ID". Also ich bin ein wenig verwirrt über Ihre Ergänzung zu meiner Antwort.
  • Ja, es ist Teil der Komponenten-template. Allerdings mit querySelector das element wurde noch null. Gibt es eine andere Möglichkeit zu wählen, die von ID? Was übersehen vielleicht?
  • Ich aktualisiert meine Antwort. Das sollte funktionieren. Aber @ViewChild() ist in der Regel der bessere Weg für Ihren Fall.
  • Ok, vielen Dank.
InformationsquelleAutor Blackbam | 2017-01-30
  1. 9

    Verschieben Sie den code, um ngAfterViewInit()

    class MyComponent implements AfterViewInit {

  @ViewChild("mapCanvas")
  ElementRef canvas;

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

    Wenn der Konstruktor ausgeführt wird, ist es kein DOM, die noch erstellt, die für die Komponente.

    BEARBEITEN: Element war Korrekt, aber immer noch null. Funktioniert jetzt nach dem Aufruf in der Art der Winkel-Bindung mit ViewChild annotation.

    <div #mapCanvas></div>

    update

    <div id="my-canvas"></div>
    class MyComponent implements AfterViewInit {
  ElementRef _elementRef;

  MyComponent(this._elementRef);

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

  }
}

    update für 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");

  }
}
    • vielen Dank für das update!
    • Dies hat geholfen, eine Menge! Komisch, warum ist dies nicht offizieller Teil des documentaions. Vielen Dank!!!
    InformationsquelleAutor Günter Zöchbauer
  2. 0

    Laut aktuellen Diskussion in der AngularDart Gitter-Kanal, ein guter Weg, dies zu tun, in AD5 wäre:

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

    ...oder wenn die Einstellung des ViewChild passiert nach der Ansicht init (z.B. eine *ngIf beteiligt ist), können Sie mit einem setter:

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

}
    InformationsquelleAutor DanielMcQ
Schreibe einen Kommentar