Ionic 4 Подписка срабатывает только при прямой загрузке страницы

Question

У меня проблема с подпиской в ​​Ionic 4 страница.Метод подписки запускается, когда я загружаю страницу по ее маршруту прямо в браузере.Если я перехожу на страницу по ссылке маршрутизатора, метод подписки не запускается.

Я использую Ионные вкладки и читаю несколько проблем 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 (я пробовал routerlink и router.navigate), консольный журнал подписки отсутствует:

Этоогромная проблема, так как мне нужно динамически отображать данные на разных страницах, и это невозможно, если я не могу подписаться на Observable из своего сервиса.

Я также попробовал {{ productService.points | async }} в шаблоне с тех порподписка итсlf, но ошибка остается прежней.

productService.points имеет тип Observable<Number>, но ошибка возникает и на других наблюдаемых объектах.

Должен ли я сообщить об этом или я простоЧто-то пропустили?
Пожалуйста, прокомментируйте, если вам нужно что-то еще.

Заранее спасибо

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 .

Пожалуйста, посмотрите на этот ответ , а также в этом блоге :

У субъекта есть одна особенность, которая не позволяет нам использовать его для создания наблюдаемых служб данных: если мы подпишемся на него, мы не получимПоследнее значение, нам придется подождать, пока какая-то часть приложения вызовет next ().

Это создает проблему, особенно в ситуациях начальной загрузки, когда приложение все еще инициализируется и не все подписчики зарегистрировались, например, невсе асинхронные каналы имели возможность зарегистрироваться самостоятельно, поскольку еще не все шаблоны инициализированы.

Я обновлю этот ответ, как только смогу привести пример рабочего кода.