angularjs - 使用 Ionic 中的 ElementRef 将映射加载到 ngSwitch 子范围

Question

我正在尝试使用 @ViewChild 和 ElementRef 访问 ngSwitchCase View ，以在我的 Ionic 3 应用程序中加载谷歌地图。我了解 ngSwitch 创建了自己的范围，但无论如何它都无法访问，所以我可以将 map 从谷歌加载到 mapView ngSwitchCase 中的#map id="map"div？

page.ts

//the import
import { ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'page-views',
  templateUrl: 'views.html'
})
export class ViewsPage {

//the attribute in the export class
@ViewChild('map') mapElement : ElementRef;
views: string = "listView";

  constructor(public navCtrl: NavController) {}

  //the functions 
  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    this.geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      // initializing map attributes
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    });
  }
}

page.html

<ion-toolbar>
  <ion-segment [(ngModel)]="views">
    <ion-segment-button value="mapView">
      Map
    </ion-segment-button>
    <ion-segment-button value="listView">
      List
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content padding>
  <div [ngSwitch]="views">
    <ion-list *ngSwitchCase="'mapView'">
      <ion-item>
        <div #map id="map"></div>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'listView'">
      //other stuff
    </ion-list> 
  </div> 
</ion-content>

Answer 1

ngSwitch 动态创建和销毁相应的 DOM 元素。由于您开始使用初始化为 ListView 的默认 View

views: string = "listView";

ionic 列表是

<ion-list *ngSwitchCase="'mapView'">

在 DOM 中不存在。因此，不存在带有 map 的 div，它是 ion-list 的子项。因此 mapElement : ElementRef一片空白。如果您从带有 map 的默认分段 View 开始，则可能

views: string = "mapView";

您的代码可能会运行并创建一次 map 。就试一试吧。这个对我有用。 备注 在切换段时 map 被破坏并且可能不会再次创建，因为您的 loadMap()只运行一次。

此时，您有两个选择。

代替 ngSwitch(创建/销毁元素)，使用 show/hide Map 和 List。

page.scss

 .hide 
 {
  display: none !important;
 }

page.html

<ion-content padding>
    <div #map id="map" [ngClass]="{ 'hide': views != 'mapView' }"></div>
    <div [ngClass]="{ 'hide': views != 'listView' }">
        <ion-list >
         //other stuff
        </ion-list> 
    </div> 
</ion-content>

有一个带有 map 选项卡和列表选项卡的选项卡组件。

page.ts

import { ElementRef, ViewChild } from '@angular/core';
import { ListPage } from '../list/list';
import { MapPage } from '../map/map';

@Component({
  selector: 'page-views',
  templateUrl: 'views.html'
})
export class ViewsPage {

   views: string = "listView";

   tab1Root = MapPage;
   tab2Root = ListPage;

   constructor(public navCtrl: NavController) {}

}

page.html

  <ion-content>
    <ion-tabs>
     <ion-tab [root]="tab1Root" tabTitle="Map" tabIcon="map"></ion-tab>
     <ion-tab [root]="tab2Root" tabTitle="List" tabIcon="list"></ion-tab>
    </ion-tabs>
  </ion-content>

map .ts

.
.
export class MapPage { 

  @ViewChild('map') mapElement : ElementRef;

  constructor(){}

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    //stuff here
  }
 }

另外，我注意到您正在创建一个 map 列表

<ion-list *ngSwitchCase="'mapView'">
  <ion-item>
     <div #map id="map"></div>
  </ion-item>
</ion-list>

你不想要一张 map 吗？这不应该像

 <div [ngSwitch]="views">
    <div #map id="map" *ngSwitchCase="'mapView'"></div>
    <ion-list *ngSwitchCase="'listView'">
    .
    .