Ionic 2 document.getElementById gibt null zurück

Question

Ich erstelle eine kleine App mit Ionic 2. Jetzt teste ich es im Browser mit ionischem Aufschlag. In meiner map.html Datei habe ich folgenden Code:

<ion-content > 
    <div id="myMap"></div> 
</ion-content> 

In meiner map.ts Datei, habe ich versucht, dies zu tun:

this.platform.ready().then((readySource) => { 
console.log('Platform ready from', readySource); 
console.log(document.getElementById('myMap')); 
//this.initializeMap(); 
}); 

Die Konsole Ausgänge:

Platform ready from dom null

Scratch my Kopf viel, aber immer noch nicht finden, warum es dieses Element nicht finden kann.

Jede Hilfe wäre willkommen!

Answer 1

Wenn Sie versuchen, die Elementbasis für die ID zu erhalten, können Sie anstelle von Javascript auch angular viewChild verwenden.

Um dies zu tun würde ich den Code so schreiben.

In Ihrem map.html

<ion-content > 
    <div #myMap></div> 
</ion-content> 

In Ihrem map.ts

stellen Sie sicher, ViewChild von @ Winkel/Kern

import { Component, ViewChild } from '@angular/core'; 

... 

export class MapPage { 
    @ViewChild('myMap') myMap ; 

    constructor(public viewCtrl: ViewController, params: NavParams) { 
    console.log(this.myMap); //visit your element by using this.myMap 
    } 

}