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

本文介绍了创建ngSwitch新视图后Angular2调用自定义函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Angular2+Ionic2 创建一个小应用程序.在这个应用程序中，当用户使用 ion- 切换到 map-segment 时，我想将 google-map 初始化为 view segment段

以下是示例代码结构:

<ion-segment [(ngModel)]="homeSegment"><ion-segment-button value="list">列表..</ion-segment-button><ion-segment-button value="map" >地图</ion-segment-button></离子段></ion-navbar><离子含量><div [ngSwitch]="homeSegment" ><div *ngSwitchWhen="'map'"><div id="googleMap"></div>

<ion-list *ngSwitchWhen="'list'">清单</ion-list>

</离子含量>

我已经尝试为 ion-segment-button 提供 click 侦听器，但这并没有解决了.在将带有 id="googleMap" 的 div 附加到 DOM 之前，添加地图的功能被触发，并导致未定义错误.

那么，当 ngSwitch 发生时，我们如何理解何时加载新元素?最好的方法是什么?

更新(添加js代码)

import {Page, NavController} from 'ionic-angular';从'../../services/dataServicesManager'导入{DataServiceManager}；@页({templateUrl: 'build/pages/listFob/listFob.html'})导出类 ListFob {静态获取参数(){返回 [[NavController],[DataServiceManager]];}onPageWillEnter(){this.fetchFobs();}ngOnInit(){console.log("on init");console.log(this.homeSegment);}ngAfterContentChecked() {console.log("内容检查")}构造函数(导航，数据服务管理器){this.nav = 导航；this.dataServiceManager = dataServiceManager;this.homeSegment = "list";}加载映射(){console.log(document.getElementById("googleMapAllFobs"));//TODO: 加载地图功能}}

添加指令时出现错误消息

./app/directives/switch-segment.js模块构建失败:语法错误:/Users/Piccaza/ionic-projects/learning/fob/app/directives/switch-segment.js:意外令牌 (8:27)6 |})7 |导出类 SwitchSegment {>8 |@Output() switchSegment: EventEmitter = new EventEmitter();|^9 |ngOnInit() {10 |console.log("指令触发！");11 |this.onCreate.emit('dummy');在 Parser.pp.raise (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1378:13)在 Parser.pp.unexpected (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2817:8)在 Parser.pp.expect (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2811:33)在 Parser.pp.parseMethod (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1091:8)在 Parser.pp.parseClassMethod (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2495:8)在 Parser.pp.parseClassBody (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2456:10)在 Parser.pp.parseClass (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2339:8)在 Parser.pp.parseStatement (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1813:19)在 Parser.pp.parseExportDeclaration (/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:2578:15)在 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)您的系统信息:Cordova CLI:未安装离子版本:2.0.0-beta.3离子 CLI 版本:2.0.0-beta.19离子应用程序库版本:2.0.0-beta.9ios-部署版本:1.8.5ios-sim 版本:5.0.6操作系统:Mac OS X El Capitan节点版本:v5.3.0Xcode 版本:Xcode 7.2.1 构建版本 7C1002

解决方案

没有内置支持 ngSwitch 添加/删除元素时调用函数.

我将创建一个指令，该指令在创建时调用该函数(例如在 ngOnInit() 中)或发出一个事件处理程序可以绑定到的事件，并将其应用到组件在启用 ngSwitch 分支时添加.

如果 ngSwitch 添加了一个组件，你也可以在这个组件中实现它(取决于你的要求)

更新

 清单</ion-list>

@Directive(选择器:'[onCreate]')导出类 OnCreate 实现 OnInit {@Output() onCreate:EventEmitter = new EventEmitter();ngOnInit() {this.onCreate.emit('dummy');}}

Plunker 示例

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调用自定义函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-21 03:32