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()
Можете ли вы уточнить, используете ли вы ViewChild или ContentChild? Минимально воспроизводимый пример также очень поможет, в идеале в онлайн-редакторе кода, таком как Stackblitz
Я использую @viewChild
Ответы 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()
}
Спасибо! проблема в том, что теперь я не знаю, как определить, что я пришел сзади, если (event.restoredState) сейчас не подходит
@Juniorfullstackdev window:popstate запускается при нажатии кнопки «Назад», а затем обновлении страницы?
Мне нужно получить доступ к дочернему элементу представления внутри компонента, поэтому все, что помогает, хорошо, однако я подписываюсь на события, чтобы сохранить данные, и до сих пор я мог использовать event.restoredState, и теперь оно больше не восстанавливается.
@Juniorfullstackdev перезагрузите страницу или перезагрузите компонент, тогда просмотр дочернего элемента будет доступен, предпочтительнее перезагрузить страницу.
но тогда как я узнаю, что к странице был получен доступ с помощью обратного действия?
@Juniorfullstackdev СДЕЛАЙТЕ голосование (^), если ответ помог, спасибо!
@Juniorfullstackdev без проблем, спасибо!
Вы можете использовать ngAfterViewInit и setTimeout, чтобы отложить его до полной визуализации представления.
ngAfterViewInit() {
setTimeout(() => {
if (this.item) {
this.item.resetFilters();
}
});
}
Можете ли вы поделиться своим кодом в stackblitz?