Question

我有一个带有home.html / home.ts页面和service connectivity-service.ts的离子2项目。该服务应检查用户是在线还是离线。除了服务之外，还会添加一些侦听器以监视用户是否脱机或联机。每个使用该服务的页面都应该为服务提供功能，应该在onOnline / onOffline上调用。

这是我的连接服务代码：

import {Injectable} from '@angular/core';
import { Network } from 'ionic-native';
import { Platform } from 'ionic-angular';

declare var Connection;

@Injectable()
export class ConnectivityService {

    onDevice: boolean;
    onOnlineFunction: any;
    onOfflineFunction: any;

    constructor(public platform: Platform) {
        this.onDevice = this.platform.is('cordova');
    }

    /**
     * Initialise the connectivity service
     * @param onOnlineFunction
     * @param onOfflineFunction
     */
    init(onOnlineFunction = null, onOfflineFunction = null){
        this.onOnlineFunction = onOnlineFunction;
        this.onOfflineFunction = onOfflineFunction;
        if(this.isOnline()){
            if(this.onOnlineFunction){
                this.onOnlineFunction();
            }
        }
        else{
            if(this.onOfflineFunction){
                this.onOfflineFunction();
            }
        }
        this.addConnectivityListeners();
    }

    /**
     * Check if the user is online
     * @return {boolean}
     */
    isOnline(): boolean {
        // Check if the user is on a device or on browser
        if(this.onDevice && Network.type){
            return Network.type !== Connection.NONE;
        }
        else{
            return navigator.onLine;
        }
    }

    /**
     * Watch online oberservable to check if the user comes online
     * @return {Observable<any>}
     */
    watchOnline(){
        return Network.onConnect();
    }

    /**
     * Watch offline oberservable to check if the user goes offline
     * @return {Observable<any>}
     */
    watchOffline() {
        return Network.onDisconnect();
    }

    /**
     * Add connectivity listeners to permanently check if the user goes on- or offline
     */
    addConnectivityListeners(): void {

        let onOnline = () => {

            if(this.onOnlineFunction){
                this.onOnlineFunction();
            }

        };

        let onOffline = () => {

            if(this.onOfflineFunction){
                this.onOfflineFunction();
            }

        };

        this.watchOnline().subscribe(() => {

            onOnline();

        });

        this.watchOffline().subscribe(() => {

            onOffline();

        });

        if(!this.onDevice){
            document.addEventListener('online', onOnline, false);
            document.addEventListener('offline', onOffline, false);
        }

    }

}

这是我home.ts中的ionViewDidLoad函数以及当用户在线/上线时应该调用的函数：

ionViewDidLoad() {

    this.platform.ready().then(() => {

        this.connectivity.init(this.loadData);

    });

}

loadData(){
    // Here are some API calls and other things with other services
    // and also some allocations to some variables from home.ts
}

现在的问题是服务调用此函数，就像它是服务的一部分一样。因此，如果此功能中使用的服务未导入连接服务，则它无法正常工作。最重要的是，对home.ts变量的分配不起作用。有没有办法在连接服务中调用给定的函数。就像在home.ts中调用它一样？

Answer 1

您需要使用Function.Prototype.bind以确保this对象仍然是组件的对象。

this.platform.ready().then(() => {

    this.connectivity.init(this.loadData.bind(this));//here

});

离子2 - 来自服务中控制器的呼叫功能

1 个答案: