Angular 4: перехватить кнопку браузера назад и вперед, нажмите и обновите страницу

Я новичок в angular 4 и столкнулся с проблемой, когда страница не обновляется, если пользователь нажимает кнопку браузера назад или вперед. параметры запроса в URL изменяются согласно истории, но страница не обновляется с предыдущими результатами. Например, / search? Text = "ret", а кнопка "Назад" становится / search? Text = ben & tab = doc.

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

Настройка window.location.href работает, но перезагружает страницу. Может ли маршрутизатор-магазин ngrx стать решением?

https://github.com/ngrx/platform/blob/v4.1.1/docs/router-store/api.md

1
0
2 642
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Насколько я понимаю, обновлять страницу на самом деле не нужно. Это все, что касается одностраничных приложений. Вместо этого попробуйте заранее изменить страницу в обработчике location.onPopState. Вы можете выполнить там даже router.navigate или проанализировать всплывающие параметры запроса, извлечь и повторно заполнить результаты поиска. Вы уже знаете новое местоположение, поэтому действуйте, используя эти знания в процессе.

Спасибо, я использую магазин ngrx и открыл для него новый вопрос. Спасибо всем за ваш ответ

Arvind Maheshwari 17.05.2018 14:36

Когда путь маршрута остается прежним, но параметры запроса или параметры маршрута являются динамическими (изменение), текущий компонент не будет уничтожен и повторно инициализирован. Это если вы не отметите маршрутизатор для этого (Router.onSameUrlNavigation ('reload') - см. https://angular.io/api/router/Router).

В вашем случае вы должны подписаться на параметры запроса маршрута и реагировать при появлении новых параметров.

например.

subscriptions: Subscription[] = [];

constructor(private route: ActivatedRoute) { }

ngOnInit() {

    this.subscriptions.push(this.route.queryParamMap.subscribe(queryParamMap => {
        const text = queryParamMap.get('text');
        const doc = queryParamMap.get('doc');

        this.updateView(text, doc);
    }));
}

ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
}

Используйте route.snapshot как ярлык только в том случае, если вы знаете, что вам не нужно обрабатывать параметры динамического маршрута / запроса.

Другие вопросы по теме