创建ngSwitch新视图后，Angular2调用自定义函数

问题描述

我正在使用
$ b $

如果 ngSwitch 添加了一个组件，您也可以在此组件中实现它（取决于您的要求） p>

更新

 < ion-list （onCreate）=doSomething（）* ngSwitchCase ='list'> 
列出
< / ion-list> 
  

  @Directive（selector ：'[onCreate]'）
导出类OnCreate实现OnInit {
 @Output（）onCreate：EventEmitter = new EventEmitter（）; 
 
 ngOnInit（）{
 this.onCreate.emit（'dummy'）; 
} 
} 
  

I am creating a small app using Angular2+Ionic2. In this app I want initialise google-map into view segment when user switch to the map-segment using ion-segment

Following is the sample code structure:

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

I have tried by providing click listener for ion-segment-button, but that doesn't worked out. Before div with id="googleMap" is appended to DOM, functionality for adding map gets triggered, and which result a undefined error.

So, how we can understand when new elements are loaded when an ngSwitch happens? Whats the best way to do it?

update (adding js code)

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

Error message coming while adding Directive

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

解决方案

There is no built-in support of calling a function when ngSwitch adds/removes elements.

I would create a directive that calls the function when created (for example in ngOnInit()) or emits an event where an event handler can be bound to, and apply it to the component that is added when the ngSwitch branch is enabled.

If ngSwitch adds a component you can implement it in this component as well (depends on your requirements)

update

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

这篇关于创建ngSwitch新视图后，Angular2调用自定义函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！