Angular вернуться на страницу, viewChild не определен

У меня есть такой сценарий; компонент A переходит в B, и когда я возвращаюсь к A, элемент @viewChild не определен. Я пытался получить к нему доступ в ngAfterViewInit, ngAfterContentInit, но он всегда не определен. Это последнее, что я пробовал:

@ContentChild('item', { static: false }) item: ItemComponent;

 ngAfterContentInit() {
 if (this.item) {
          this.item.resetFilters();
}

РЕДАКТИРОВАТЬ

Я также использую данные, которые были в компоненте, поэтому мне нужно знать, что теперь я вернулся и это не новая навигация:

 if (event.restoredState))
      this.setSavedData()

🤔 А знаете ли вы, что...
Angular предоставляет инструменты для создания одностраничных приложений (SPA) с помощью компонентной архитектуры.


1
51
2

Ответы:

Решено

Кнопка «Назад» приводит к неправильной работе приложений SPA, поскольку состояние на предыдущем экране теряется. Вы можете вызвать перезагрузку компонента, используя приведенный ниже код.

Вы можете разместить этот код в корне вашего приложения, например app.component.ts.

Код ниже не обновляет экран, а перезагружает компонент.

import { HostListener } from '@angular/core';

constructor(private router: Router) {}

@HostListener('window:popstate', ['$event'])
onBackButton(event) {
  this.router.navigateByUrl(`${window.location.pathname}`, {
    skipLocationChange: true,
    onSameUrlNavigation: 'reload',
  });
}

Вы также можете обновить страницу, нажав кнопку «Назад».

import { HostListener } from '@angular/core';

@HostListener('window:popstate', ['$event'])
onBackButton(event) {
  location.reload()
}

Вы можете использовать ngAfterViewInit и setTimeout, чтобы отложить его до полной визуализации представления.

ngAfterViewInit() {
  setTimeout(() => {
    if (this.item) {
      this.item.resetFilters();
    }
  });
}