Angularjs 在Ionic中使用ElementRef将映射加载到ngSwitch子作用域

我正在尝试使用@ViewChild和ElementRef访问ngSwitchCase视图，以便在我的Ionic 3应用程序中加载谷歌地图。我知道ngSwitch创建了自己的作用域，但它在任何情况下都不可访问，因此我可以将地图从google加载到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);
    });
  }
}

 .hide 
 {
  display: none !important;
 }

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) {}

}

.
.
export class MapPage { 

  @ViewChild('map') mapElement : ElementRef;

  constructor(){}

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    //stuff here
  }
 }

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>

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

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

地图
列表
//其他东西

ngSwitch动态创建和销毁相应的DOM元素。因为您启动了默认视图，并将其初始化为列表视图

views: string = "listView";

离子列表是

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

您的代码可能会运行并创建一次映射。试试看。它对我有用请注意在切换段时，映射将被销毁，并且可能不会再次创建，因为您的

loadMap（）

只运行一次

此时，您有两个选择

使用“显示/隐藏贴图和列表”代替ngSwitch（创建/销毁元素）

page.scss

//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);
    });
  }
}

 .hide 
 {
  display: none !important;
 }

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) {}

}

.
.
export class MapPage { 

  @ViewChild('map') mapElement : ElementRef;

  constructor(){}

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    //stuff here
  }
 }

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>

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

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

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>

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

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

另外，我注意到您正在创建一个带有

<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'">
    .
    .

.
.

谢谢Vishal！你关于制作一个地图的观点很好理解，我将尝试将默认设置为

，但必须解决加载问题。请用潜在的解决方案提交我的答案，以克服ngSwitch的创建/销毁DOMAwesome，使用解决方案1，直到我们得到正确的实现。