Question

我正在尝试使用 @ViewChild 和 ElementRef 访问 ngSwitchCase 视图，以在我的Ionic 3应用中加载Google地图。我了解 ngSwitch 创建了自己的范围，但无论如何都无法访问，因此我可以将地图从谷歌加载到 #map id =“map”div 中< em> mapView ngSwitchCase ？

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元素。由于您开始使用

初始化为列表视图的默认视图

views: string = "listView";

离子列表

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

DOM中不存在

。因此，不存在具有map的div，它是ion-list的子元素。因此mapElement : ElementRef为空。如果您使用类似

的地图的默认分段视图开始，则可能会出现这种情况

views: string = "mapView";

您的代码可能会运行并创建一次地图。就试一试吧。这个对我有用。注意，在切换片段时，地图会被销毁，并且可能无法再次创建，因为loadMap()只运行一次。

此时，您有两种选择。

使用show / hide Map和List。而不是ngSwitch（创建/销毁元素）。

<强> 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>

使用包含“地图”标签和“列表”标签的标签组件。

<强> 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
  }
 }

另外，我注意到您正在使用

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

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

使用Ionic中的ElementRef将地图加载到ngSwitch子范围

1 个答案: