离子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中

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

}