6

我正在开发一个 Ionic2 应用程序，使用 cordova-plugin-network-information，我从我的 app.ts 订阅连接和断开事件，并希望能够将我的 NavController 和加载组件的引用传递给订阅() 回调，因此每当断开连接的事件触发时，我都可以在 UI 顶部向用户显示加载覆盖。我看到在回调中对“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...
      });
    }

这是我在 Chrome DevTools 中查询“this”对象时得到的结果（这应该将其原始上下文保留在 lambda [fat arrow] 函数中，这是正确的吗？）

在此处输入图像描述

我已经尝试在订阅之前设置一个“那个”对象，以便变量“this”不会干扰回调“this”范围，它在这种情况下不起作用，因为“那个”是立即声明的在触发断开事件时，在回调内部未定义 subscribe() (let that: any = this;) 之前。

我知道这不是放置直接更改 UI 的代码的最佳位置，但我看不到其他位置，因为我需要的是一个全局事件处理程序，它通过在未检测到连接和用户时设置此覆盖来工作正在查看应用程序中的某些页面。

我认为应该有一个非常简单和优雅的解决方案，但我似乎无法找到它。有没有办法将参数传递给 subscribe() 函数？某种带有我需要的引用的对象？

提前致谢。

4

4 回答 4

1

要在 subscribe 中传递组件变量对象，您必须使用更多 rxjs 运算符，例如 combineLatest。只需为您要在 subscribe 中传递的对象创建一个新的 Observable，并将其作为 combineLatest 的参数。例如。

    // 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);
         });

这是我找到最终答案的参考资料。

于 2020-10-01T05:13:02.413 回答
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);  
      });
    }
于 2016-07-24T04:05:42.497 回答
1

我遇到了同样的问题。我也正在SafeSubscriber参与我的项目。但是，当我尝试为其创建Plunker时，我无法重现该问题。也就是说，附加的 plunker 确实证明了胖箭头 + this 的行为符合预期。所以你不应该做任何that = this风格的解决方法。

于 2017-02-21T18:50:40.243 回答
0

Karan 的模式有效，但这也有效，这有点简单（使用绑定）：

    ngOnInit()
    {
      // Nav Controller:
      this.nav = <NavController>this.app.getComponent('nav');

      // Disconnect Detection
      const fn = (() => {
          console.log('Disconnect Detected');
          this.nav.present(this.loading); // 'this' should be set right
      }).bind(this);
      let disconnectSubscription = Network.onDisconnect().subscribe(fn);
    }

不运行它，但对于我拥有的代码也适用，它遵循相同的模式并且具有与操作描述相同的错误。使用闭包不起作用，我不明白为什么。调用者“SafeSubscriber”使用调用方法并将上下文设置为自身作为该调用的一部分。

于 2021-09-09T21:25:01.490 回答