2017-11-20 5 views
0

だから私はこのように子ルートを使用して,,,角度5に取り組んでいます:角度5件名オブザーバーは、親ルートコンポーネントでキャッシュすることはできません

const routes: Routes = [ 
    { 
    path: 'inbox', component: InboxComponent, 
    children: [ 
     { path: ':id', component: RequestDetailsComponent } 
    ] 
    }, 

    { path: '', redirectTo: '/inbox', pathMatch: 'full' }, 
    { path: '**', component: InboxComponent } 

]; 

は基本的に私は受信トレイで何かを変更したいですもし私が経路 'inbox/id'をロードした場合、コンポーネントはいくつかのアクションを実行するためにインボックスコンポーネントを使います。そして、詳細コンポーネント上のボタンをクリックすると、親ルートを変更したいと思います。変更はhtmlクラスの追加であることを示しています。

私はサービスを作成することによって、変更を観察するために件名サービスを次のように使用します:

onChangeView() { 
    this.inboxService.changeView(this.mode); 
    } 

と私InboxCompnentに私はこのような主題に加入しています:については

@Component({ 
    selector: 'app-inbox', 
    templateUrl: './inbox.component.html', 
    styleUrls: ['./inbox.component.scss'], 
    providers: [InboxService] 
}) 
export class InboxComponent implements OnInit, OnDestroy { 

    private subscription: Subscription; 
ngOnInit() { 
     this.subscription = this.inboxService.openRequestDetails 
      .subscribe(
      (request: any) => { 
      console.log(request); 
      }, 
      (error: any) => console.log('error'), 
     () => console.log('complete') 
     ) 
} 

私はこのようなサービスの変更ビュー関数を呼び出しています私のRequestDetailsComponentで

mport { Injectable } from "@angular/core"; 
import { ApiHelperService } from "../../shared/services/api-helper.service"; 
import { Subject } from "rxjs/Subject"; 
import { Question } from "../../models/question"; 

@Injectable() 
export class InboxService { 
    uri = 'questions?order=desc&sort=activity&site=stackoverflow&filter=!-*f(6rLIPlIq'; 
    colors = ['bg-primary-400', 'bg-purple-400', 'bg-info-400', 'bg-warning-400', 'bg-danger-400', 'bg-violet-400', 'bg-success-400']; 
    public openRequestDetails = new Subject<number>(); 

    changeView(view: number){ 
     this.openRequestDetails.next(view); 
    } 
} 

参照、ここに私のapp.moduleです、私は無関係の輸入を削除しました:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 


import { AppComponent } from './app.component'; 
import { InboxComponent } from './inbox/inbox.component'; 
import { RequestComponent } from './inbox/request/request.component'; 
import { RequestDetailsComponent } from './inbox/request-details/request-details.component'; 
import { InboxService } from './inbox/inbox.service'; 
import { AppRoutingModule } from './routing/app-routing.module'; 
import { RouterModule } from '@angular/router'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    InboxComponent, 
    RequestComponent, 
    RequestDetailsComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    AppRoutingModule 
    ], 
    providers: [ApiHelperService, InboxService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
終わり

私は子供のルート受信トレイ/ 123で午前とき、このサブスクリプションは発火しません...

任意のアイデア?私は子供のコンポーネントを使用することはできません、それは子供のルートでなければなりません。私は多くの子供のルートを持っているので。

私は同じコンポーネントRequestDetailsComponentにサブスクリプションを追加した場合...それが正常に動作..

答えて

0

私は同様の問題を持っていたし、問題の根本は、サービスのDIにありました。それらのすべてのコンポーネントを含む共有モジュールにInboxServiceを注入しますか? providersモジュールの配列を確認してください。ここではまだ共有していません。

+0

受信ボックスサービスは、APIからデータを読み取るために使用している場所に正しく挿入されます。次の関数が呼び出されましたが、inboxComponent(親コンポーネント)がイベントをキャッチしていません –

+0

モジュールのコードを共有できますか? – DrNio

+0

私はあなたの参照のためのより多くのコードで私の質問を更新しました –

関連する問題