angular2中父组件和子组件(由路由器出口分隔)之间的数据通信

Question

[SOLVED]-@günter-zöchbauer

我是Angular2和TypeScript的新手。我正在尝试在父节点和孙子节点之间建立通信。我的应用程序中的层次结构如下

• 家长
  • 路由器插座
    • child1
    • child2
    • child3

我想在孩子1和父母之间建立沟通。我以以下方式创建了一个数据服务（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（如果要与之通信的组件处于祖先/后代关系，则可以是祖先组件）。

为每个提供创建一个新实例。如果在每个组件上提供，那么每个组件都将获得自己的服务实例。如果只提供一次，则此组件和所有子体将获得相同的实例。