如何在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”中，并在单击搜索时在标头组件中保存新结果搜索，并且该结果必须在home组件中更新，所以我不知道如何进行操作回到首页组件并获取新结果搜索

Answer 1

您可以使用angular的EventEmitter 。 当用户单击触发onsearch时，您可以将事件与用户输入的this.search值一起发送到其他组件。 在home component.ts中，您可以侦听事件并检查事件是否返回数据（即搜索值），然后可以调用downloadRecentSearches()并传递事件返回的值。

有关角组件交互的更多信息，您可以在此处查看其文档

例：

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
   })
}