Ionic2 离子2离子变化事件在事件完成前激发

我正在努力把地图放在第二段。这是一个典型的问题，我已经找到了几种解决方案，但它们对我不起作用，因为事件似乎在片段完全构建之前就被触发了。我不知道这是因为离子的突变，还是因为我做错了

page.html：

<ion-toolbar>
  <ion-segment [(ngModel)]="view" (ionChange)="changeSegment()">
    <ion-segment-button value="list">
      <ion-icon name="list-box" isActive="false"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="map" (ionSelect)="selectMap()">
      <ion-icon name="map" isActive="false"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content [ngSwitch]="view">
  <div *ngSwitchCase="'list'"></div>
  <div *ngSwitchCase="'map'">
    <div id='map'>Here the map comes.</div>
  </div>
</ion-content>

（是的，那个项目使用的是JavaScript，而不是TypeScript。）

对于change和select事件，第一次单击它们会返回map元素的“null”，只有第二次单击它们才会返回正确的元素

在我看来，事件似乎是在片段完成之前触发的。（但我也可能犯了一个愚蠢的初学者错误…）

---

如何知道

#map

元素何时可用？

与其尝试获取ID为的元素（就像在JQuery中那样），不如创建一个自定义指令？这样，当元素包含在DOM中时，映射将被初始化（因为ngSwitch添加和删除元素），您就不必担心它了。也许对你也有帮助（虽然是ng1，但概念是一样的）。谢谢@sebafereras，我会调查的！

import {Component} from "@angular/core";

@Component({
  templateUrl: 'build/pages/page/page.html'
})
export class Timeline {
  constructor() {
    this.view = "list";
    this.selectMap = function() {
      console.log("selectMap:", document.getElementById("map"));
    }
    this.changeSegment = function() {
      console.log("changeSegment:", document.getElementById("map"));
    }
  }
}