typescript - Datakommunikasjon mellom foreldre- og barnebarnkomponenter (skilt av en router outlet) i angular2?

[LØST] - @günter-zöchbauer

Jeg er ny på Angular2 og TypeScript. Jeg prøver å etablere kommunikasjon mellom en forelder og en barnebarn-node. Hierarkiet i appen min er som følger

  • Forelder

    • ruter-utløp

      • barn1

      • router-outlet
      • child1

      • barn2
      • barn3

Jeg vil etablere kommunikasjon mellom child1 og parent. Jeg har opprettet en dataservice (debug.service.ts) på følgende måte:-

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

}

Barnekomponenten oppdaterer data på følgende måte:-

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

Min overordnede komponent som inneholder router-outlet-elementet i malen sin er som følger:-

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

}

Så vidt jeg kan observere, mottar DebugService data, men av en eller annen grunn klarer ikke foreldrekonponenten å abonnere på det. Noen ideer/forslag til hvordan jeg kan få router-outlet-komponenter til å kommunisere med foreldrekonponenten?

Svar #1

Gi DebugService kun én gang på en felles forelder (det kan være en overordnet komponent hvis komponentene du vil kommunisere med er i et overordnet/underordnet forhold).

En ny instans opprettes for hver provide. Hvis du provide på hver komponent, vil hver komponent få sin egen tjenesteinstans. Hvis du kun provide én gang, vil denne komponenten og alle etterkommere få den samme instansen.

Relaterte artikler