Ionic 4 Subscribe 仅在直接加载页面时触发

Question

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

我正在使用 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:

如您所见，生命周期事件运行正常，订阅方法已按预期调用。

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

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

我也尝试在模板中 {{ productService.points | async }} 从那时起 angular 处理订阅本身，但错误保持不变。

productService.points是 Observable<Number> 类型，但错误也发生在其他 Observables 上。

我应该为此提交问题还是我只是遗漏了什么？
如果您还需要什么，请评论。

提前致谢

Answer 1

这不是订阅的问题，订阅成功只会在可观察对象 this.productService.points 发出任何内容时执行。您应该检查是什么导致 observable 在直接导航时发出，而不是在使用选项卡时发出。

您可以通过将订阅分配给变量和console.log订阅对象来确认正在附加订阅。

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

Answer 2

解决方案是使用 BehaviorSubject（或 ReplaySubject）而不是 Observable。

请看这个, and also on this blog post:

Subject has one particularity that prevents us from using it to build observable data services: if we subscribe to it we won't get the last value, we will have to wait until some part of the app calls next().

This poses a problem especially in bootstrapping situations, where the app is still initializing and not all subscribers have registered, for example not all async pipes had the chance to register themselves because not all templates are yet initialized.

我会在提供有效代码示例后尽快更新此答案。

Ionic 4 Subscribe 仅在直接加载页面时触发

Ionic 4 Subscribe only fires when page is loaded directly

observable

ionic-framework

angular

ionic4