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

IT技术 javascript google-maps angular ionic2
2021-03-15 08:34:18

我正在使用Angular2+Ionic2. 在这个程序我想INITIALISEgoogle-map到view segment当用户切换到map-segment使用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，但没有成功。在divwithid="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
3个回答

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

我将创建一个指令，该指令在创建时调用该函数（例如在 中ngOnInit()）或发出一个可以绑定事件处理程序的事件，并将其应用于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');
  }
}

Plunker 示例

我添加了一个答案，这似乎解决了我的问题。非常感谢您的所有意见。
2021-04-22 08:34:18
谢谢@jsgoupil，看到你的改变迟到我自己接受了。
2021-05-18 08:34:18
2021-05-20 08:34:18

您还可以在更改离子段时调用函数。

<ion-segment [(ngModel)]="homeSegment" (ionChange)="updatePage(homeSegment)">

并在您的组件中具有类似的功能

updatePage(homeSegment) {
  if (homeSegment === 'map') {
    this.loadMap();
  }
}

也许这对某人有帮助。

最后我是如何解决这个问题的，方法是提供一个(change)="onSegmentChanged($event)"关于ion-segment element.

无论何时ion-segment都会触发switch。而我能够访问dom element with id googleMapAllFobs时，其越来越切换到value="map"。

提供了一个check inonSegmentChanged函数，在调用load google map函数之前，确保当前视图包含div来加载谷歌地图。

对于当前的要求，看起来很容易。

你能分享你是如何设法让它工作的吗..我试过了，但不能让它工作:(
2021-05-01 08:34:18
嗨，迪帕克。面临同样的任务，但不知道如何在onSegmentChanged发生后取回对 DOM 元素的引用。你能分享一段代码吗？你如何声明和访问之前和之后的元素 onSegmentChanged？我使用@ViewChild装饰器来捕捉带有地图的 div，但在第一个事件出现后它是未定义的，因为 div 从 DOM 中删除...
2021-05-05 08:34:18
其它你可能感兴趣的问题
上一篇javascript "resizeTo" 函数在 Chrome 和 Opera 中不起作用 下一篇正则表达式仅捕获匹配中捕获组的最后一个实例