将一个组件数据传递给另一组件 [英] passing one component data to other component

问题描述

我正在从服务器获取响应，我想将此响应传递给其他组件以进行显示.我尝试了一种方法，但是变得不确定. 尝试过这种方式如何通过一个组件对角度2中的其他组件的服务响应. 昨天得到的结果面临路由.改变了一点，创建了分离的组件.

I am getting response from server,I want pass this response to other component for displaying. I tried in one way but getting undefined. Tried this way how to pass one component service response to other component in angular 2. yesterday got the results faced routing. Changed little bit created separated components.

mainsearch.component.ts:

mainsearch.component.ts:

export class MainsearchComponent {

  selected;
  skipCount: number = 0;
  errorMessage: string;
  searchedResults: any;

  searchObj: Object = {

    skipCount: this.skipCount

  };

  onChange(newVlaue) {
    console.log(newVlaue);

    this.selected = newVlaue;
  }

  constructor(private searchService: searchService, private router: Router) { }

  searchall() {

    console.log(this.searchObj);

    var searchData = this.searchObj;
    console.log(searchData);

    this.searchService.getSearchbyDistrictCategoryCity(this.searchObj).subscribe(
     data => {
      this.searchedResults = data;
      this.searchService.searchResults = data;
      console.log(this.searchedResults);
      console.log(this.searchService.searchResults);
      this.router.navigate(['/searchdetails']);
    },
    error => this.errorMessage = <any>error
    );
  }
}

searchdetails.component.ts:

searchdetails.component.ts:

export class SearchdetailsComponent {

  searchedResults:any;

  constructor(private searchService: searchService) {
    this.searchedResults = this.searchService.searchResults;
    console.log(this.searchedResults);  
  }
}

search.service.ts:

search.service.ts:

export class searchService {

  public searchResults;

  private searchAllUrl: string = "http://192.168.1.134:8000/app/school/searchbydistrictandcategoryandlocation"

  constructor(private http: Http) { }

  getSearchbyDistrictCategoryCity(searchObj) {
    // console.log(searchObj);
    // let body = JSON.stringify({ searchObj });
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post(this.searchAllUrl, searchObj, { headers: headers })
      .map((response: Response) => response.json())
      .catch(this.handleError);
  }

  private handleError(error: Response | any) {

    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

现在路由工作正常， 但数据没有进入searchdetails组件

now routing working fine, but data is not getting in searchdetails component

推荐答案

这是一个异步函数:

getSearchbyDistrictCategoryCity(searchObj) {
// console.log(searchObj);
// let body = JSON.stringify({ searchObj });
let headers = new Headers();
headers.append('Content-Type', 'application/json');

return this.http.post(this.searchAllUrl, searchObj, { headers: headers })
  .map((response: Response) => response.json())
  .catch(this.handleError);
}

在这里，您要在构造函数中分配结果:

Here you are assigning the result in the constructor:

export class SearchdetailsComponent {

  searchedResults:any;

  constructor(private searchService: searchService) {
    this.searchedResults = this.searchService.searchResults;
    console.log(this.searchedResults);  
  }
}

目前，您正在将searchService.searchResults分配给SearchdetailsComponent中的搜索结果，搜索服务中的功能可能不完整.

At the moment you are assigning the searchService.searchResults to the search results in your SearchdetailsComponent the function in your search service may not be complete.

您可以从搜索详细信息组件的模板访问searchService.searchResults，因为它是公共的. 更好的方法是也可以在您的搜索详细信息中订阅来自服务的搜索功能.

You could access the searchService.searchResults from the template of your search details component because it's public. A better way would be to subscribe to the search function from your service in your search details too.

这篇关于将一个组件数据传递给另一组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！