兄弟コンポーネントから別の角度へデータを渡す2

Question

私は自分自身に角度2を教えようとしています（実際は角度4ですが、Googleの番号付けスキームはちょっとファンキーです）。とにかく、これまで私は、angle.ioのサンプルとstackoverflowの質問に答えて、すべてのことを動作させる方法を見つけ出すことができました。しかし、この1つは私を突っ込んでいます。

私の問題は、2つの異なるコンポーネント、検索バーと結果ページを使用して多数のJSONデータファイルをフィルタリングできる検索ページを作成しようとしていることです（これを行うより良い方法がある場合は、私はすべての耳です）。私はデータを収集する検索バーを取得し、データをルータ経由で結果ページに渡すようにしています。実際にはクエリとフィルタリングが行われますが、結果ページを取得してデータを読み取ることはできませんクエリ文字列から。関連するファイルは次のとおりです。

検索bar.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'search-bar', 
    templateUrl: './search-bar.component.html', 
    styleUrls: ['./search-bar.component.css'] 
}) 
export class SearchbarComponent { 

    langSelect: string = 'english'; // Default search language 

    searchTerm: string; 

    constructor(private router: Router) {} 

    searchForTerm() { 
     let data: string = this.searchTerm + '_' + this.langSelect 
     this.router.navigate(['/results', {searchData: data}]); 
    } 
} 

検索results.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

import { WordEntry } from '../../shared/models/word-entry'; 
import { DataRetrievalService } from '../../shared/services/data-retrieval.service'; 

@Component({ 
    templateUrl: './search-results.component.html', 
    styleUrls: ['./search-results.component.css'] 
}) 
export class SearchResultsComponent implements OnInit { 
    searchData: string; // Two parameters separated by '_'. search term is on the left and the language on the right 


    constructor(private dataSvc: DataRetrievalService, private route: ActivatedRoute) {} 

    ngOnInit() { 
     console.log('starting!'); 

     this.route.params.subscribe((params: Params) => { 
      this.searchData = params['searchData']; 
      console.log(this.searchData); 
     }); 
    } 
} 

-----------編集 - -----------

search.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule, Routes } from '@angular/router'; 
import { FormsModule } from '@angular/forms'; 

import { SearchbarComponent } from './searchBar/search-bar.component'; 
import { SearchComponent } from './searchComponent/search.component'; 
import { SearchResultsComponent } from './searchResults/search-results.component'; 
import { DataRetrievalService } from '../shared/services/data-retrieval.service'; 

const SearchRoutes: Routes = [ 
    { 
     path: 'search', 
     component: SearchComponent, 
     children: [ 
      { path: 'results', component: SearchResultsComponent } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     RouterModule.forChild(SearchRoutes) 
    ], 
    exports: [ 
     RouterModule, 
     SearchbarComponent 
    ], 
    declarations: [ 
     SearchComponent, 
     SearchbarComponent, 
     SearchResultsComponent 
    ], 
    providers: [ 
     DataRetrievalService 
    ] 
}) 
export class SearchModule {} 

これらの2つのファイルは、検索モジュール内のそれぞれのフォルダ内の兄弟コンポーネントです。

私の問題は、コンソールに何も印刷されていないため、ngOnInit（）が呼び出されていないように見えて、searchDataクラスの変数に何も入っていないということです。

私が間違っていることに関するアイデアはありますか？ご協力いただきありがとうございます！

Answer 1

私がしたことの原因と結果を100％確信しているわけではありませんが、検索モジュールではなくSearchbarComponentとSearchResultsComponentをメインのアプリケーションモジュールに抽出してデータがビュー遷移間のサービスに永続化されていたので、私はそれを動作させました。

[最初は]サービスで起こっていたと思うのは、SearchbarComponentが（現在はnav-barの一部であるため）アプリケーションモジュールのサービスインスタンスと話していたことで、SearchResultsComponentは検索モジュールサービスインスタンス。

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 

import { AppComponent } from './start/app.component'; 
import { HomeComponent } from './home/home.component'; 
import { ErrorComponent} from './error/error.component'; 
import { NavComponent } from './shared/navbar/navbar.component'; 
import { AppRoutingModule } from './shared/app.routing'; 
import { SearchbarComponent } from './searchBar/search-bar.component'; 
import { SearchResultsComponent } from './searchResults/search-results.component'; 

import { WordEntry } from './shared/models/word-entry'; 
import { LexiconComponent } from './lexicon/lexicon.component'; 
import { DataRetrievalService } from './shared/services/data-retrieval.service'; 
import { TruncatePipe } from './shared/pipes/trunc.pipe'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     AppRoutingModule, 
     HttpModule, 
     JsonpModule 
    ], 
    exports: [ 
     TruncatePipe 
    ], 
    declarations: [ 
     AppComponent, 
     NavComponent, 
     HomeComponent, 
     ErrorComponent, 
     LexiconComponent, 
     TruncatePipe, 
     SearchbarComponent, 
     SearchResultsComponent 
    ], 
    providers: [ 
     DataRetrievalService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

search.service.ts

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/Rx'; 
import { Observable } from 'rxjs/Observable'; 


@Injectable() 
export class SearchService { 

    private _searchData = new BehaviorSubject<string>(''); // Initialize with emtpy string 

    setSearchData(data: string) { 
     // Fire the update event with the new data 
     this._searchData.next(data); 
    } 

    getSearchData(): Observable<string> { 
     return this._searchData.asObservable(); 
    } 
} 

検索-bar.component：ここ

は、関連するファイルの一部です.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { DataRetrievalService } from '../shared/services/data-retrieval.service'; 

@Component({ 
    selector: 'search-bar', 
    templateUrl: './search-bar.component.html', 
    styleUrls: ['./search-bar.component.css'] 
}) 
export class SearchbarComponent { 

    langSelect: string = 'english'; // Default search language 

    searchTerm: string; 

    constructor(private router: Router, private searchSvc: SearchService) {} 

    searchForTerm() { 
     let data: string = this.searchTerm + '_' + this.langSelect 

     // Update the service 
     this.searchSvc.setSearchData(data); 

     // No need to change routes if you're already on that page, even if it's a no op. 
     if (this.router.url != '/search') { 
      this.router.navigate(['/search']); 
     } 
    } 
} 

search-results.component。TS

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

import { WordEntry } from '../shared/models/word-entry'; 
import { DataRetrievalService } from '../shared/services/data-retrieval.service'; 

@Component({ 
    templateUrl: './search-results.component.html', 
    styleUrls: ['./search-results.component.css'] 
}) 
export class SearchResultsComponent { 
    searchData: string; // Two parameters separated by '_'. search term is on the left and the language on the right 

    constructor(private dataSvc: DataRetrievalService, private searchSvc: SearchService) { 
     // This should trigger anytime the searchbar is submitted 
     this.searchSvc.getSearchData().subscribe(searchData => { 

      // Don't even bother searching for an empty string 
      if (searchData != '') { 
       let parts = searchData.split('_', 2); 

       // Clear the searchResults, otherwise it just appends to the list with each search 
       this.searchResults = []; 

       this.searchForWord(parts[0], parts[1]); 
      } 
     }); 
    } 
} 

検索result.component.html

<nav-bar></nav-bar> 

{{searchData}} 

私は、これはラインの下の誰かに役立ちます願っています。