Datenkommunikation zwischen Eltern- und Enkelkomponenten (getrennt durch einen Router-Ausgang) in angular2?

Question

[Gelöst] - @ günter-zöchbauer

Ich bin neu in Angular2 und TypeScript. Ich versuche, die Kommunikation zwischen einem Elternknoten und einem Enkelknoten herzustellen. Die Hierarchie in meiner app ist als

• folgt Geordnetes
  • Router-outlet
    • child1
    • child2
    • Child3

Ich möchte die Kommunikation zwischen child1 und Eltern herstellen. Ich habe einen Datendienst (debug.service.ts) auf folgende Weise erstellt: -

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); 
    } 

} 

Das Kind Komponenten-Updates Daten auf folgende Weise: -

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); 
    } 
} 

Meine Eltern-Komponente, die enthält die Router Austrittselement in seiner Vorlage ist wie folgt: -

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; 
      } 
     );   
    } 

} 

Soweit ich beobachten kann, die DebugService Daten empfängt, aber aus irgendeinem Grund die Mutterkomponente in der Lage, nicht zu abonnieren es. Irgendwelche Ideen/Vorschläge, wie ich Router-Outlet-Komponenten zur Kommunikation mit der übergeordneten Komponente bekommen kann?

Answer 1

Geben Sie DebugService nur einmal an einem gemeinsamen übergeordneten Element (kann die Vorfahrkomponente sein, wenn die Komponenten, mit denen Sie kommunizieren möchten, in einer Vorfahren/Nachkommen-Beziehung sind).

Es wird jeweils eine neue Instanz erstellt. Wenn Sie für jede Komponente angeben, erhält jede Komponente ihre eigene Serviceinstanz. Wenn Sie nur einmal angeben, erhalten diese Komponente und alle Nachkommen dieselbe Instanz.