創建ngSwitch新視圖后，Angular2調用自定義函數

Question

我正在使用Angular2+Ionic2創建一個小應用程序。 在這個應用程序中，當用戶使用ion-segment切換到map-segment view segment時，我希望將google-map初始化為view segment ion-segment

以下是示例代碼結構：

<ion-navbar *navbar class="hide-navbar">
    <ion-segment [(ngModel)]="homeSegment">
        <ion-segment-button value="list">
            List..
        </ion-segment-button>
        <ion-segment-button value="map" >
            Map
        </ion-segment-button>
    </ion-segment>
</ion-navbar>
<ion-content>
    <div [ngSwitch]="homeSegment" >

        <div *ngSwitchWhen="'map'">
            <div id="googleMap"></div>
        </div>

        <ion-list *ngSwitchWhen="'list'">
           Listing
        </ion-list>
    </div>
</ion-content>

我試過通過為ion-segment-button提供click監聽ion-segment-button ，但這沒有成功。 在將id="googleMap" div附加到DOM ，會觸發添加地圖的功能，從而導致undefined error 。

那么，當ngSwitch發生時，我們如何理解何時加載新元素？ 什么是最好的方法呢？

更新（添加js代碼）

import {Page, NavController} from 'ionic-angular';
import {DataServiceManager} from '../../services/dataServicesManager';

@Page({
  templateUrl: 'build/pages/listFob/listFob.html'
})
export class ListFob {
    static get parameters(){
        return [[NavController],[DataServiceManager]];
    }
    onPageWillEnter(){
        this.fetchFobs();
    }
    ngOnInit(){
        console.log("on init");
        console.log(this.homeSegment);
    }
    ngAfterContentChecked() {
        console.log("content checked")
    }
    constructor(nav, dataServiceManager){
        this.nav = nav;
        this.dataServiceManager = dataServiceManager;
        this.homeSegment = "list";
    }
    loadMap(){
        console.log(document.getElementById("googleMapAllFobs"));
        // TODO: load map functionality
    }
}

添加指令時出現錯誤消息

./app/directives/switch-segment.js
Module build failed: SyntaxError: /Users/Piccaza/ionic-projects/learning/fob/app/directives/switch-segment.js: Unexpected token (8:27)
   6 | })
   7 | export class SwitchSegment {
>  8 |     @Output() switchSegment: EventEmitter = new EventEmitter();
     |                            ^
   9 |     ngOnInit() {
  10 |         console.log("Directive triggered!");
  11 |         this.onCreate.emit('dummy');
    at Parser.pp.raise (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2817:8)
    at Parser.pp.expect (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2811:33)
    at Parser.pp.parseMethod (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1091:8)
    at Parser.pp.parseClassMethod (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2495:8)
    at Parser.pp.parseClassBody (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2456:10)
    at Parser.pp.parseClass (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2339:8)
    at Parser.pp.parseStatement (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1813:19)
    at Parser.pp.parseExportDeclaration (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2578:15)
    at Parser.pp.parseExport (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2566:29)
 @ ./app/pages/listFob/listFob.js 16:21-63 (CLI v2.0.0-beta.19)

Your system information:

Cordova CLI: Not installed
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002 

Answer 1

您還可以在更改離子段時調用函數。

<ion-segment [(ngModel)]="homeSegment" (ionChange)="updatePage(homeSegment)">

並在您的組件中的功能類似

updatePage(homeSegment) {
  if (homeSegment === 'map') {
    this.loadMap();
  }
}

也許這有助於某人。

Answer 2

當ngSwitch添加/刪除元素時，沒有內置支持調用函數。

我將創建一個在創建時調用該函數的指令（例如在ngOnInit() ）或發出可以綁定事件處理程序的事件，並將其應用於啟用ngSwitch分支時添加的組件。

如果ngSwitch添加了一個組件，你也可以在這個組件中實現它（取決於你的要求）

更新

    <ion-list (onCreate)="doSomething()" *ngSwitchCase="'list'">
       Listing
    </ion-list>

@Directive(selector: '[onCreate]')
export class OnCreate implements OnInit {
  @Output() onCreate:EventEmitter = new EventEmitter();

  ngOnInit() {
    this.onCreate.emit('dummy');
  }
}

Plunker的例子

Answer 3

最后我通過在ion-segment element上提供(change)="onSegmentChanged($event)"來解決這個問題。

只要ion-segment將switch這將觸發。 當我切換到value="map"時，我可以dom element with id googleMapAllFobs訪問dom element with id googleMapAllFobs 。

提供了onSegmentChanged函數的檢查，在調用load google map功能之前，確保當前視圖包含div加載谷歌地圖。

對於當前的要求看起來很容易。