[SOLVED] - @günter-zöchbauer
I am new to Angular2 and TypeScript. I am trying to establish communication between a parent and a grand-child node. The hierarchy in my app is as follows
- Parent
- router-outlet
- child1
- child2
- child3
- router-outlet
I want to establish communication between child1 and parent. I have created a data service (debug.service.ts) in the following manner:-
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);
}
}
The child component updates data in the following manner:-
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);
}
}
My parent component which contains the router outlet element in its template is as follows:-
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;
}
);
}
}
As far as I can observe, the DebugService is receiving data, but for some reason the parent component is not being able to subscribe to it. Any ideas/suggestions as to how I can get router-outlet components to communicate with the parent component?
