Angular 10: ngOnInit не срабатывает в развернутой версии приложения в Firefox при переходе с внешнего URL-адреса с помощью кнопки «Назад» в браузере.

Я вижу, что жизненный цикл развернутого приложения Angular в Firefox выглядит иначе.

Существует довольно тривиальный код компонента приложения:

export class AppComponent implements OnInit {
  public ngOnInit(): void {
    console.log('OnInit');
  }
}

Его html также прост:

<a href="https://angular.io">Bring me to external URL</a>

Я ожидаю следующий сценарий. Пользователь открывает приложение, видит в консоли «OnInit», переходит по ссылке, нажимает кнопку «Назад» и видит в консоли новое сообщение «OnInit» (или второе, если журнал сохранился).

Это работает так, если я запускаю приложение локально с ng serve в любом браузере.

Но это выглядит иначе, если я создам приложение с помощью ng build --prod, разверну его (например, используя https://www.npmjs.com/package/http-server) и откройте его в Firefox. Я все еще вижу «OnInit», появляющийся в консоли, когда я загружаю приложение. Но ничего не происходит, когда я нажимаю на ссылку и возвращаюсь. Код внутри OnInit не достигнут. Похоже, что компонент или вся страница не перезагружаются, FF отображает предыдущее состояние.

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

Я также проверил навигацию внутри приложения. Он отлично работает везде для внутренних URL-адресов.

Не могли бы вы объяснить мне, почему это происходит и как получить OnInit в Firefox?

Я нашел похожую ветку на GitHub. Но команда Angular не думает, что это проблема фреймворка.


angular lifecycle firefox back ng-build
person greatromul    schedule 10.09.2020    source источник
comment
Это может помочь вам stackoverflow.com/questions/47512979/   -  person Johan Faerch    schedule 16.09.2020

Ответы (1)


arrow_upward
3
arrow_downward

Проблема вызвана тем, что Angular не запускает перехватчики жизненного цикла, когда вы «возвращаетесь» в свое приложение с внешнего URL-адреса.

@HostListener("document:visibilitychange", ["$event"])
handleVisibilityChange(event: any): void {

    // Handle stuff

    }
}

Код из Почему бы и нет? хуки жизненного цикла запускаются при смене вкладок в моем приложении?

person Johan Faerch    schedule 16.09.2020