как перезагрузить компонент в angular5

Question

shared.service.ts

    public _test:any;

      set test(value:any) {
        this._test = value
      }

      get test():any {
        return this._test;
      } 

header.ts

 private postValues() {
    this._PartService.PostDataValues(this.search).subscribe(
      result => {
         this.sharedService._test
        })
  }

  onSearch() {
       this.postValues()
   }

home.ts

private downloadRecentSearches() {
   this.recentSearchService.download().subscribe(
    searches => {
      this.resultData = searches;
      this.originalSearches = this.resultData.data;
      this.sharedService._test = this.originalSearches
      this.onSelectItem()
    })
  }

В приведенном выше коде я устанавливаю результат в "this.sharedService._test", а в компоненте заголовка по щелчку поиска я сохраняю новый результат поиска, и этот результат должен обновляться в домашнем компоненте. поэтому я не понимаю, как вернуться к домашнему компоненту и получить новый результат поиска

Answer 1

Вы можете использовать угловой EventEmitter. Когда пользователь нажимает триггер на поиск, вы можете отправить событие другим компонентам вместе со значением this.search, введенным пользователем. А в вашем home component.ts вы можете прослушать событие и проверить, возвращает ли он данные (которые являются поисковым значением), тогда вы можете вызвать downloadRecentSearches() и передать значение, возвращаемое событием.

для получения дополнительной информации о взаимодействии компонентов в angular, вы можете проверить их документацию здесь

пример:

shared.service.ts

import { Output, EventEmitter } from '@angular/core';

@Output() search: EventEmitter<string> = new EventEmitter();

searchChanged(value) {
   this.search.emit(value);
}

search.component.ts

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

@HostListener('change')
onSearch() {
   this.sharedService.searchChanged(this.search)
}

home.component.ts

constructor() {
  this.eventListener();
}

eventListener() {
   this.sharedService.search.subscribe((searchValue) => {
       console.log(searchValue) // value of the inputted by user
       // do your logic here
   })
}