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

问题描述

我收到服务器的响应，我想将此响应传递给其他组件以进行显示.我以一种方式尝试过，但未定义.试过这种方式如何通过一个组件服务响应 angular 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屋！