我正在使用创建一个小应用程序Angular2+Ionic2
。在这个应用程序中我想初始化google-map
into view segment
当用户切换到map-segment
using 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>
我尝试过提供click
听众ion-segment-button
,但这并没有成功。前div
with id="googleMap"
被附加到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
没有内置支持在以下情况下调用函数:ngSwitch
添加/删除元素。
我将创建一个在创建时调用该函数的指令(例如在ngOnInit()
)或发出一个事件处理程序可以绑定到的事件,并将其应用于当事件处理程序添加时添加的组件ngSwitch
分支已启用。
If ngSwitch
添加一个组件,您也可以在此组件中实现它(取决于您的要求)
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');
}
}
笨蛋的例子 https://plnkr.co/edit/2rZAAo?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)