angular2中父組件和子組件之間的數據通信（由路由器插座分隔）？

Question

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

我是Angular2和TypeScript的新手。我正在嘗試建立父級和子級節點之間的通信。在我的應用程序的層次結構如下

• 家長
  • 路由器出口
    • child1
    • 的child2
    • child3

我想在child1和父母之間建立溝通。我創建了一個數據服務（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); 
    } 
} 

我父組件包含了在它的模板路由器出口元素如下： -

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

} 

據我可以觀察到，在DebugService正在接收數據，但由於某些原因父組件是不能夠訂閱它。關於如何讓路由器插座組件與父組件進行通信的任何想法/建議？

Answer 1

在共同的母公司提供DebugService只一次（可以是祖先組件，如果你想與之通信的組件是在祖先/後代關係）。

爲每個提供的新實例創建。如果您提供每個組件，每個組件都將獲得自己的服務實例。如果你只提供一次，這個組件和所有後代將得到相同的實例。