Sto creando una piccola app utilizzando Angular2+Ionic2 . In questa app voglio inizializzare google-map nel view segment quando l’utente passa al map-segment usando il map-segment ion-segment
Di seguito è riportata la struttura del codice di esempio:
List.. Map Listing
Ho provato fornendo listener di click per il ion-segment-button , ma ciò non ha funzionato. Prima di div con id="googleMap" viene aggiunto al DOM , viene triggersta la funzionalità per l’aggiunta della mappa e il risultato di un undefined error .
Quindi, come possiamo capire quando vengono caricati nuovi elementi quando si verifica un ngSwitch ? Qual è il modo migliore per farlo?
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
Non esiste un supporto integrato per chiamare una funzione quando ngSwitch aggiunge / rimuove elementi.
Creo una direttiva che richiama la funzione quando viene creata (ad esempio in ngOnInit() ) o emette un evento a cui può essere associato un gestore eventi e lo applica al componente che viene aggiunto quando il ramo ngSwitch è abilitato.
Se ngSwitch aggiunge un componente, puoi implementarlo anche in questo componente (dipende dalle tue esigenze)
aggiornare
Listing
@Directive(selector: '[onCreate]') export class OnCreate implements OnInit { @Output() onCreate:EventEmitter = new EventEmitter(); ngOnInit() { this.onCreate.emit('dummy'); } }
Esempio di Plunker
È anche ansible chiamare una funzione quando viene modificato il segmento ionico.
e nel tuo componente una funzione come
updatePage(homeSegment) { if (homeSegment === 'map') { this.loadMap(); } }
Forse questo aiuta qualcuno.
Infine, ho risolto il problema fornendo un (change)="onSegmentChanged($event)" sull’elemento ion-segment element .
Che si innescherà ogni volta che il ion-segment cambierà. E sono in grado di accedere dom element with id googleMapAllFobs quando passa a value="map" .
Fornito un controllo onSegmentChanged funzione onSegmentChanged , prima che la chiamata load google map funzione load google map , per garantire che la vista corrente contenga div per caricare la mappa di google.
Sembra molto facile per questo requisito attuale.