Teilen Sie Daten für Kinder Routen

Question

Obwohl es wie eine gemeinsame Situation scheint, habe ich keine anständige Lösung gefunden, wie ich eine Daten von den Eltern zu Kindern Routen teilen.

Routen:

{ 
    path: ':id', 
    component: DetailComponent, 
    children: [ 
     { path: 'overview', component: OverviewComponent }, 
     { path: 'profile', component: ProfileComponent } 
    ] 
} 

Service:

@Injectable() 
export class Service { 
    constructor(private http: Http) { } 

    getModel(id: number): Observable<Profile> { 
     // ajax request to the server using Http service 
     // returns Profile model 
    } 
} 

DetailComponent (Eltern):

@Component({ 
    moduleId: module.id, 
    templateUrl: 'detail.component.html' 
}) 
export class DetailComponent implements OnInit, OnDestroy { 
    model: any = {}; // how do I share this with children components avoiding another ajax request? 

    private paramSub: any; 
    private modelId: number; 

    constructor(
     private activeRoute: ActivatedRoute, 
     private service: Service) { } 

    ngOnInit(): void { 
     this.paramSub = this.activeRoute.params.subscribe(params => { 
      this.modelId = +params['id']; 
      this.service.getModel(this.modelId).subscribe(model => this.model = model); 
     }); 
    } 

    ngOnDestroy(): void { 
     this.paramSub.unsubscribe(); 
    } 
} 

OverviewComponent (Kind):

@Component({ 
    moduleId: module.id, 
    templateUrl: 'overview.component.html' 
}) 
export class OverviewComponent implements OnInit, OnDestroy { 
    model: any = {}; 

    private paramSub: any; 
    private modelId: number; 

    constructor(
     private activeRoute: ActivatedRoute, 
     private service: Service) { } 

    ngOnInit(): void { 
     this.paramSub = this.activeRoute.parent.params.subscribe(params => { 
      this.modelId = +params['id']; 
      // another request to the server which I need to prevent 
      this.service.getModel(this.modelId).subscribe(model => this.model = model); 
     }); 
    } 

    ngOnDestroy(): void { 
     this.paramSub.unsubscribe(); 
    } 
} 

Wie Sie die übergeordnete Komponente erhält ein gemeinsamen Daten sehen können, die zu den Kindern Routen geleitet werden muss. Wenn möglich, diese Daten im Service zwischenzuspeichern, kann jemand einen geeigneten Weg empfehlen, dies zu erreichen und den Cache ungültig zu machen? Wenn das alles nicht gut ist, schlagen Sie bitte den richtigen Weg vor.

eckig: 2.0.0-rc.6; Router: 3.0.0-rc.2

Answer 1

import { Observable } from 'rxjs/Observable'; 
... 

@Injectable() 
export class Service { 
    private model: Profile; 
    constructor(private http: Http) { } 

    getModel(id: number): Observable<Profile> { 
     if (this.model) { 
      return Observable.of(this.model); 
     } 

     // ajax request to the server using Http service 
     // returns Profile model 
     return http.get(...).map(res => this.model = res) 
    } 
}