Блог

У меня есть родительский поиск и 2 дочерних компонента поиска. Первый дочерний компонент просто отображает текстовое поле и кнопку отправки, а затем выдает событие при вводе текста поиска.Второй дочерний компонент отображает результаты. Родительский компонент принимает текст поиска и вызывает службу поиска. Поиск также может быть инициирован по другим маршрутным ссылкам в приложении с помощью параметров запроса. http://www.example.com/search?s=foobar

Представление поиска родителей

 <!-- child component 1 -->
<searchBox (search)="onSearchTextEntered($event)" [searchText]="this.searchText"></searchBox>
<!-- child component 2 -->
<searchResults [results]="this.searchResults"></searchResults>
 

Компонент поиска родителей

 ...
  // This caters for searches initiated via query params
  ngOnInit() {

    this.searchText = this.activatedRoute.snapshot.queryParams.s;

    if (this.searchText) {
      this.executeSearch(this.searchText);
    }  
 }
  
  // This caters for searches initiated from child component 1 
   onSearchTextEntered(searchText: string) {

    window.history.pushState({}, '', `/search?s=${searchText}`);

    this.executeSearch(searchTet);
  }
 

Проблема возникает, когда вы нажимаете назад или вперед, так как ngOnInit() не будет вызываться в этих сценариях, и родительский компонент не отобразит никаких новых результатов.

Я решил эту проблему, добавив следующее в ngOnInit()

 this.navSubscription = this.router.events.subscribe((e: any) => {
      if (e instanceof NavigationEnd) {
        this.searchText = this.activatedRoute.snapshot.queryParams.s;
        this.executeSearch(this.searchText);
      }
    });
 

Вопрос

Теперь текст поиска будет подобран с помощью назад/вперед, и результаты поиска будут обновлены, но привязка к первому дочернему компоненту не отражена, и поэтому текстовое поле никогда не обновляется с помощью текста поиска, отображаемого в параметрах запроса. Представьте, что вы искали «а», затем «в» и, наконец, «с». Нажатие назад или вперед изменит URL-адрес, и правильные результаты будут отображаться на странице, но текстовое поле останется с последним введенным текстом, в данном случае «c».

Такое ощущение, что я неправильно подхожу к этой проблеме, существует ли установленный шаблон для решения подобной проблемы или, возможно, какое-то событие, которое может здесь помочь?