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()并传递事件返回的值。

有关角度组件交互的更多信息，您可以查看其文档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

1 个答案: