创建ngSwitch新视图后，Angular2调用自定义函数 [英] Angular2 calling custom function after ngSwitch new view is created

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

问题描述

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



以下是示例代码结构： 

 < ion-navbar * navbar class =hide-navbar> 
< ion-segment [（ngModel）] =homeSegment> 
< ion-segment-button value =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'> 
列出
< / ion-list> 
< / div> 
< / ion-content>

我曾尝试通过提供 点击 listener for ion-segment-button ，但这并不奏效。在 div 之前添加 id =googleMap 到 DOM ，触发添加地图的功能，以及导致 未定义错误的功能 ngSwitch 。 c> 发生？最好的办法是什么？



更新（添加js代码）



 从'ionic-angular'导入{Page，NavController}; 
从'../../services/dataServicesManager'导入{DataServiceManager}; 
 
 @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）
} 
构造函数（nav，dataServiceManager）{
 this.nav =导航; 
 this.dataServiceManager = dataServiceManager; 
 this.homeSegment =list; 
} 
 loadMap（）{
 console.log（document.getElementById（googleMapAllFobs））; 
 // TODO：载入地图功能
} 
}



添加指令时出现错误消息 

  ./ app / directives / switch-segment.js 
模块构建失败：SyntaxError ：/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（虚设）; 
 at Parser.pp.raise（/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js:1378:13）
 at Parser.pp.unexpected（/ Users / 
 at Parser.pp.expect（/ Users / Piccaza / ionic-projects / learning / fob / node_modules / babylon / pics / node_modules / babylon / index.js：2817：8） 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（/用户/ Piccaza /离子亲在/ Parser.pp.parseExport（/Users/Piccaza/ionic-projects/learning/fob/node_modules/babylon/index.js：$ / $ ob $ / bob / node_modules /babylon/index.js:2578:15） 2566：29）
 @ ./app/pages/listFob/listFob.js 16：21-63（CLI v2.0.0-beta.19）
 
您的系统信息：
 
 Cordova CLI：未安装
 Ionic版本：2.0.0-beta.3 
 Ionic CLI版本：2.0.0-beta.19 
 Ionic App Lib版本：2.0。 0-beta.9 
 ios-deploy版本：1.8.5 
 ios-sim版本：5.0.6 
操作系统：Mac OS X El Capitan 
节点版本：v5.3.0 
 Xcode版本：Xcode 7.2.1 Build版本7C1002


解决方案

当 ngSwitch 添加/移除元素时，没有内置的调用函数的支持。



I会创建一个在创建时调用函数的指令（例如在 ngOnInit（））中，或者发出一个事件处理程序可以绑定的事件，并将其应用到组件这是添加时 ngSwitch 分支已启用。
$ 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'）; 
} 
}

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆