Angular 角度2：在其他组件中显示搜索结果

我的搜索字段位于单独的组件上。搜索时在建议列表上显示名称没有问题，因为我没有在不同的组件中显示它们

搜索HTML

但是如果我想在

change

事件上的另一个组件（列表组件）中显示它，该怎么办

我应该在输入字段中添加什么作为函数调用？我应该在SearchComponent中添加什么，以便结果显示在List Component中？

搜索服务

getSuggestion（名称：string）：可观察{
返回此文件。http
.get（this.serverUrl+'name/'+name）
.map（此.extractData）
.接住（这个.把手错误）；
}

在搜索服务中有一个主题。有了主题，你不需要告诉其他组件一个新的结果已经出现。一旦出现结果，视图将自动更新

private results = new BehaviorSubject([]);

public getResults$(){
   return this.results.asObservable();
}

public search(params){
   //do search and add results to 'results'
   this.results.next(response);
}

在您的列表组件中

constructor(private searchService: SearchService){
   searchService.getResults$()
                 .subscribe(res){
                     this.results = res;
                  };
}

在HTML中

<div *ngIf="results.length>0" >
   <!-- show results -->
</div>

搜索服务

private results = new BehaviorSubject([]);

public getResults$(){
   return results.asObservable();
}

public getSuggestion(name:string) {
    this.http
    .get(this.serverUrl + 'name/' + name)
    .map(this.extractData)
    .subscribe(
        response => this.results.next(response),
        this.handleError
    );
}

列出组件ts 公共结果=空

constructor(private searchService: SearchService){
    serachService.getResults$()
                 .subscribe(resultList: any[] => {
                      this.results = resultList;
                  });
}

列出组件HTML

<input type="text" 
       placeholder="Search" 
       (keyup)="getSuggestion($event.target.value)">

<div class="suggestion" 
     *ngIf="results && results.length > 0 ">
     <div *ngFor="let result of results"
           class="search-res" 
           (click)="showEmployee(result._id)"
      > {{ result.name }} </div>
</div>
<div class="suggestion" 
     *ngIf="results && results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

{{result.name}
未找到任何结果

---

通过将results设置为null，我们将知道是否进行了搜索调用。如果结果不是null而是空的，我们就知道搜索结果是空的

在搜索服务中有一个主题。有了主题，你不需要告诉其他组件一个新的结果已经出现。一旦出现结果，视图将自动更新

private results = new BehaviorSubject([]);

public getResults$(){
   return this.results.asObservable();
}

public search(params){
   //do search and add results to 'results'
   this.results.next(response);
}

在您的列表组件中

constructor(private searchService: SearchService){
   searchService.getResults$()
                 .subscribe(res){
                     this.results = res;
                  };
}

在HTML中

<div *ngIf="results.length>0" >
   <!-- show results -->
</div>

搜索服务

private results = new BehaviorSubject([]);

public getResults$(){
   return results.asObservable();
}

public getSuggestion(name:string) {
    this.http
    .get(this.serverUrl + 'name/' + name)
    .map(this.extractData)
    .subscribe(
        response => this.results.next(response),
        this.handleError
    );
}

列出组件ts 公共结果=空

constructor(private searchService: SearchService){
    serachService.getResults$()
                 .subscribe(resultList: any[] => {
                      this.results = resultList;
                  });
}

列出组件HTML

<input type="text" 
       placeholder="Search" 
       (keyup)="getSuggestion($event.target.value)">

<div class="suggestion" 
     *ngIf="results && results.length > 0 ">
     <div *ngFor="let result of results"
           class="search-res" 
           (click)="showEmployee(result._id)"
      > {{ result.name }} </div>
</div>
<div class="suggestion" 
     *ngIf="results && results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

{{result.name}
未找到任何结果

---

通过将results设置为null，我们将知道是否进行了搜索调用。如果结果不是null而是空的，我们就知道搜索结果是空的

在SearchService中，我是否需要创建公共搜索（params）@SkeptorYes，这是进行搜索逻辑的地方。从SearchComponent中，您将调用它。在您的例子中，它是

getSuggestion

我已经从SearchService中添加了

getSuggestion

代码。非常感谢@SkeptorI没有测试代码。因此，请告诉我是否有任何错误或不起作用搜索@SkeptorIn SearchService后，当我将搜索字段留空时出现错误，我是否需要创建该公共搜索（参数）@SkeptorYes，这是进行搜索逻辑的地方。从SearchComponent中，您将调用它。在您的例子中，它是

getSuggestion

我已经从SearchService中添加了

getSuggestion

代码。非常感谢@SkeptorI没有测试代码。因此，请让我知道是否有任何错误或不起作用。在搜索@Skeptor后，当我将搜索字段留空时，会出现错误