如何在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" 和 header 组件中设置结果我正在保存新的结果搜索并且该结果必须在主页组件中更新所以我不知道如何返回主页组件并获取新结果搜索

Answer 1

您可以使用 angular 的 EventEmitter。当用户点击 trigger onsearch 时，您可以将事件连同用户输入的 this.search 值一起发送到其他组件。在你的家里 component.ts 你可以监听事件并检查它是否 returns 一个数据（这是搜索值）然后你可以调用 downloadRecentSearches() 并传递由事件。

有关 angular 中组件交互的更多信息，您可以查看他们的文档 here

示例：

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

如何在angular5中重新加载组件

how to reload the component in angular5

typescript

angular

angular5