我正在开发一个Ionic2应用程序,使用cordova-plugin-network-information,我正在订阅我的app.ts中的连接和断开事件,并希望能够传递对我的NavController和Loading组件的引用进入subscribe()回调,所以每当断开连接的事件触发时,我都可以在用户界面上向用户显示加载覆盖。我在回调中看到对" this"的引用。对象更改为名为" SafeSubscriber"的对象,我认为它是Observer对象的rxjs类型类,我在这里遇到的问题是我无法在app.ts中将这些实例提供给此回调中的代码,使用Chrome DevTools我也无法找到离开此上下文的方式来访问App对象本身。
这是我的代码:
ngOnInit()
{
// Nav Controller:
this.nav = <NavController>this.app.getComponent('nav');
// Disconnect Detection
let disconnectSubscription = Network.onDisconnect().subscribe(() =>
{
console.log('Disconnect Detected');
// Push Loading into nav stack here...!
// this.nav.present(this.loading); <- no this object...
});
}
这是我查询&#39;这个&#39; Chrome DevTools中的对象(这应该保持其原始上下文在lambda [胖箭头]函数内是正确的吗?)
我试过设置&#34;那&#34;对象在进行订阅之前,以便变量&#34; this&#34;不会干扰回调&#34;这个&#34;范围,它在这种情况下没有起作用,因为&#39;那个&#39;这是在subscribe()之前声明的那个(让那个:any = this;)在触发disconnect事件时在回调内部是未定义的。
我知道这不是放置直接更改UI的代码的最佳位置,但我看不到其他地方,因为我需要的是一个全局事件处理程序,只要没有检测到连接就可以设置此覆盖并且用户正在查看应用程序中的某些页面。
我认为应该有一个非常简单和优雅的解决方案,但我似乎无法找到它。有没有办法将参数传递给subscribe()函数?某种带有我需要的参考物的物体?
提前致谢。
答案 0 :(得分:1)
我很确定简单的关闭应该可以解决问题。试试这个:
ngOnInit()
{
// Nav Controller:
var nav = <NavController>this.app.getComponent('nav');
// Disconnect Detection
let disconnectSubscription = Network.onDisconnect().subscribe(() =>
{
console.log('Disconnect Detected');
nav.present(true);
});
}
答案 1 :(得分:0)
要在订阅中传递组件变量对象,您必须使用更多的rxjs运算符,例如CombineLatest。只需为要在内部传递的对象创建一个新的Observable对象,并将其作为combinateLatest的参数即可。 例如。
// Note: The **of** here is the rxjs of operator to create the observable.
combineLatest(
[
of(the object you want to pass{Here you will have the this variable}),
your API call
])
.pipe(take(1),)
.subscribe(([yourObject, apiResponse]) => {
console.log(yourObject + " " + apiResponse);
});
这是我找到最终答案的reference。