Ionic 2 document.getElementById returns 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。

为此，我会像这样编写代码。

在您的地图中.html

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

在您的地图中

确保从@angular/核心导入 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
  }
}