2017-09-07 10 views
1

内の他のコンポーネントへの1つのコンポーネントサービス応答を渡します.TS:どのように私は1つのコンポーネントでサーバーからの角度4、 取得応答に新しいですし、私は他のコンポーネントで、この応答オブジェクトがどのように</p> <p>app.componentにアクセスしたい角度の2

export class AppComponent { 
    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; 
      console.log(this.searchedResults); 
      this.router.navigate(['/searchdetails/']) 
     }, 
     error => this.errorMessage = <any>error); 
    } 
} 

私は検索の詳細これを取得する方法 のような他の成分でsearchedResults変数結果が欲しいです。

ありがとうございます!

+0

https://angular.io/guide/component-interaction – porgo

+0

あなたのsearchdetailsコンポーネントにsearchedResultsを渡したいようです。あなたのSearchDetailsComponentとルーティングを表示する – brijmcq

+0

@brijmcqはいどのように達成することができます – Ajay

答えて

1

検索結果をあなたのsearServiceに保存し、そこから取得することができます。そのためには、サービス内のsearchResultsプロパティを追加し、現在の検索結果で更新します。これは、次のようなものになります。

export class SearchService { 
    public searchResults; 

    ... 
} 

を、あなたがどうなる検索結果更新したいとき: `` `

this.searchService.getSearchbyDistrictCategoryCity(this.searchObj).subscribe(data=>{ 
    this.searchedResults = data; 
    this.searchService.searchResults = data; 
},error=>this.errorMessage= <any>error); 

を、あなたはまた、あなたが更新し、検索機能を上書きすることができますあなたのサービスで結果を見つけたら自動的にsearchResultsプロパティを使います。

とすることができます他のコンポーネントのサービス

this.searchedResults = this.searchService.searchResults; 

からわずかユーザープロパティをであなたはコンポーネントのアップデートが自動的に新しい日付であなたが入力に直接UserServiceのをバインドするために持っているか、追加のいずれかのことをしたい場合データ変更のリスナー

+0

あなたはちょっと精巧にすることができますか?他のコン​​ポーネントのSearchResults(search.service.tsにあります)を使用しますか? – Ajay

+0

大丈夫ですか? – Ajay

+0

編集をチェックしてください。データの変更時にコンポーネントを自動的に更新し、リスナーを追加する必要がないため、searchResultsプロパティにコンポーネントの@Inputフィールドを直接バインドすることができます。 – dom

関連する問題