typescript - Ionic 2 document.getElementById 返回 null

Question

我正在使用 Ionic 2 创建一个小应用程序。现在我正在使用 ionic serve 在浏览器中测试它。在我的 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();
});

控制台输出:

从 dom 准备好平台 无效的

绞尽脑汁还是找不到它找不到那个元素的原因。

如有任何帮助，我们将不胜感激!

Answer 1

如果您尝试根据 id 获取元素，您可以使用 angular 的 viewChild 而不是使用 javascript。

为此，我将编写如下代码。

在你的 map.html 中

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

在你的 map.ts 中

make sure you import ViewChild from @angular/core

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
  }

}