Question

我在Ionic 4页面上的订阅有问题。当我直接在浏览器中通过页面的路由加载页面时，subscribe方法才被触发。如果我通过路由器链接导航到该页面，则不会触发订阅方法。

我正在使用Ionic Tabs，并阅读了一些GitHub问题，指出在选项卡导航之间生命周期事件无法正常工作。

请从我的页面（score.page.ts）中查看以下代码：

ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.productService.points.subscribe(
        (e) => console.log('score points', e)
    );
}

ionViewDidLoad() { console.log('ionViewDidLoad'); }

ngOnInit(): void {
    console.log('ngOnInit');
}

ionViewWillEnter() { console.log('ionViewWillEnter'); }

ionViewDidEnter() { console.log('ionViewDidEnter'); }

ionViewWillLeave() { console.log('ionViewWillLeave'); }

ionViewDidLeave() { console.log('ionViewDidLeave'); }

ionViewWillUnload() { console.log('ionViewWillUnload'); }

ngOnDestroy() {
    console.log('ngOnDestroy');
}

直接输出/app/home/score的控制台输出：

如您所见，生命周期事件正常运行，并且按预期方式调用了subscription方法。

当我加载/app/home并导航到/app/home/score时（我尝试了routerlink和router.navigate），订阅的控制台日志丢失了：

这是一个很大的问题，因为我需要在不同的页面上动态显示数据，如果我无法从服务中订阅Observable，就不可能这样做。

我还尝试在模板中使用{{ productService.points | async }}，因为随后角度处理了订阅本身，但是错误保持不变。

productService.points的类型为Observable<Number>，但其他Observable也会发生错误。

我应该为此提出问题，还是我只是缺少什么？
如果您还有其他需求，请发表评论。

预先感谢

Answer 1

这与订阅无关，成功订阅仅在可观察的this.productService.points发出任何内容时才执行。您应该检查是什么导致直接在浏览时发出可观察对象，而不是在使用选项卡时发出。

您可以通过将预订分配给变量＆console.log预订对象来确认已附加该预订。

const iSubscription: Subscription = this.productService.points.subscribe(
        (e) => console.log('score points', e)
    );
console.log(iSubscription);

Answer 2

解决方案是使用 BehaviorSubject （或ReplaySubject）代替 Observable 。

请同时查看此answer和此blog post：

主题具有一种特殊性，它阻止我们使用它来构建可观察的数据服务：如果我们订阅它，我们将无法获得最后的值，我们将不得不等到应用程序的某些部分调用next（）。 / p>
尤其是在自举情况下，这会带来问题，在该情况下，应用仍在初始化并且并非所有订阅者都已注册，例如，并非所有异步管道都有机会注册自己，因为尚未初始化所有模板。

我将提供一个工作代码示例，以尽快更新此答案。

仅在直接加载页面时才触发Ionic 4订阅

2 个答案: