我正在使用 Angular2+Ionic2
创建一个小应用程序。在此应用中,当用户使用 ion- 切换到
map-segment
时,我想将 google-map
初始化为 view 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
监听器,但事实并非如此解决了。在带有 id="googleMap"
的 div
附加到 DOM
之前,添加 map 的功能被触发,并导致未定义的错误
。
那么,当 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
最佳答案
ngSwitch
添加/删除元素时,不支持调用函数。
我会创建一个指令,在创建时调用该函数(例如在 ngOnInit()
中)或发出一个可以绑定(bind)事件处理程序的事件,并将其应用于组件在启用 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');
}
}
关于javascript - Angular2 在创建 ngSwitch 新 View 后调用自定义函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36427670/