角度2：在另一个组件中显示搜索结果

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

搜寻HTML

     
 {{ result.name }} 


     
 No results found 

搜索组件

getSuggestion(name) {
    $('.suggestion').show();
    this.searchService
        .getSuggestion(name)
        .subscribe(
            name => this.results = name,
            error => alert(error),
        );
  }

但是，如果要在change事件中将其显示在另一个组件（列表组件）中怎么办？

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

SearchService

getSuggestion(name:string): Observable {
        return this.http
        .get(this.serverUrl + 'name/' + name)
        .map(this.extractData)
        .catch(this.handleError);
}

Vamshi.. 5

您的SearchService中有一个主题。有了主题，您不需要告诉其他组件新的结果已经到来。生成结果后，视图将自动更新。

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中

您的案例的确切代码：

搜索组件HTML

搜索组件ts

public getSuggestion(name){
    this.searchService.getSuggestion(name);
}

搜索服务

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

List Component ts public results = null;

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

列出组件HTML

     
 {{ result.name }} 


     
 No results found 

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

您的SearchService中有一个主题。有了主题，您不需要告诉其他组件新的结果已经到来。生成结果后，视图将自动更新。

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中

您的案例的确切代码：

搜索组件HTML

搜索组件ts

public getSuggestion(name){
    this.searchService.getSuggestion(name);
}

搜索服务

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

List Component ts public results = null;

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

列出组件HTML

     
 {{ result.name }} 


     
 No results found 

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