angle2の親と子コンポーネント間のデータ通信（ルーターのコンセントで分離）？

Question

[解決済み] - @günter-zöchbauer

私はAngular2とTypeScriptが初めてです。私は、親と子ノードの間の通信を確立しようとしています。次のように私のアプリでは階層がある

• 親
  • ルータ、アウトレット
    • child1の
    • child2の
    • child3

child1とparentの間の通信を確立したいと考えています。私は、次のようにデータサービス（debug.service.ts）を作成しました： -

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import { AngularFire, FirebaseListObservable } from 'angularfire2'; 


@Injectable() 
export class DebugService { 
    // Observable sources 
    private _projectListSource = new Subject<FirebaseListObservable<any[]>>(); 

    // Observable streams 
    projectListRetreived$ = this._projectListSource.asObservable(); 

    // Service message commands 
    announceProjectsList(projects: any) { 
     this._projectListSource.next(projects); 
     console.log("Received " + projects); 
    } 

} 

を子コンポーネントのアップデートデータは次のように： -

import { Component, ... } from '@angular/core'; 
import { DebugService } from './debug.service'; 
. . . 

@Component({ 
    selector: 'my-projects', 
    templateUrl: 'projects.component.html', 
    styleUrls: ['projects.component.css'], 
    directives: [ 
    ProjectDetailComponent, 
    . . . 
    ], 
    providers: [ 
    DebugService, 
    . . . 
    ] 
}) 

export class ProjectsComponent implements OnInit { 
    projects: Observable<any[]>; 
    . . . 

    // constructor 
    constructor(
    private router: Router, 
    . . . 
    private debugService: DebugService) { 

    } 

    // gotoDashboardView method. CALLED at the click event of the dashboard floating action button on the template. 
    gotoDashboardView() { 
    this.router.navigate(['']); 
    } 

    // Supporting method for the ngOnInit() operation. CALLED by ngOnInit. 
    getProjects() { 
    this.projects = this.projectService.getProjects(); 
    this.debugService.announceProjectsList(this.projectService.getProjects()); 

    } 

    // ngOnInit() method triggered at the initialization lifecycle hook. PROVIDED by angular2. 
    ngOnInit() { 
    this.getProjects(); 
    } 

    deleteProject(key: string) { 
    this.projectService.deleteProject(key); 
    } 
} 

が含まれている私の親コンポーネントそのテンプレートのルータ出口要素は次のとおりです。 - 私の知る限り観察できるよう、DebugServiceは、データを受信して​​いる

import { Component, ... } from '@angular/core'; 
. 
. 
. 
import { DebugService } from './debug.service'; 
import { Observable, Subscription } from 'rxjs'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: [ 
     'app.component.css'], 
    directives: [ 
     ProjectsComponent, 
     ROUTER_DIRECTIVES, 
     . . . 
    ], 
    providers: [ 
     DebugService, 
     . . . 
    ] 
}) 

export class AppComponent implements OnDestroy, OnInit{ 
    projectObject: Observable<any[]>; 
    subscription: Subscription; 

    constructor(
     public af: AngularFire, 
     private debugService: DebugService){ } 

    clicky(){ 
     console.log(this.projectObject); 
    } 

    ngOnDestroy() { 
     // prevent memory leak when component destroyed 
     this.subscription.unsubscribe(); 
    } 

    ngOnInit() { 
     this.debugService.projectListRetreived$.subscribe(
      res => { 
       this.projectObject = res; 
      } 
     );   
    } 

} 

ますが、何らかの理由で親コンポーネントはに加入することができませんさ それ。親コンポーネントと通信するためにルーター・アウトレット・コンポーネントをどのように入手できるかについてのアイデアや提案はありますか？

Answer 1

が共通の親で一度DebugServiceのみを提供します（あなたがと通信するコンポーネントは、祖先/子孫関係にある場合には先祖のコンポーネントとすることができます）。

新しいインスタンスが作成されるたびに作成されます。すべてのコンポーネントを提供する場合、すべてのコンポーネントは独自のサービスインスタンスを取得します。一度だけ提供すれば、このコンポーネントとすべての子孫は同じインスタンスを取得します。