Ionic 2 document.getElementById返回null

Question

我正在用Ionic 2創建一個小應用程序。現在我正在使用離子服務器在瀏覽器中測試它。在我map.html文件，我有以下代碼：

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

在我map.ts文件，我試着這樣做：

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

控制檯輸出：

Platform ready from dom null

我搔搔頭很多，但仍然無法找到爲什麼它不能找到該元素。

任何幫助，將不勝感激！

Answer 1

如果您試圖獲取id的元素庫，您可以使用angular的viewChild而不是使用javascript。

要做到這一點，我會寫這樣的代碼。

在你map.html

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

在你map.ts

確保你從@角/核心導入ViewChild

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 
    } 

}