Angular2 Router - den Zugriff auf übergeordnete Komponente Variablen aus dem Inneren einer untergeordneten Komponente

Question

Ich habe das folgende Modul Routing-Setup

const personsRoutes: Routes = [ 
{ 
    path: '', 
    redirectTo: '/persons', 
    pathMatch: 'full' 
}, 
{ 
    path: 'persons', 
    component: PersonsComponent, 

    children: [ 
     { 
      path: '', 
      component: PersonListComponent 
     }, 
     { 
      path: ':id', 
      component: PersonDetailComponent, 

      children: [ 
       { 
        path: '', 
        redirectTo: 'info', 
        pathMatch: 'full' 
       }, 
       { 
        path: 'info', 
        component: PersonDetailInfoComponent, 
       }, 
       { 
        path: 'edit', 
        component: PersonDetailEditComponent, 
       }, 
       { 
        path: 'cashflow', 
        component: PersonDetailCashflowComponent, 
       } 
      ] 
     } 
    ] 
} 
]; 

Also, wenn ich versuche http://localhost:4200/persons/3/edit Angular2 zu öffnen würden erste Last PersonsComponent von PersonDetailComponent gefolgt von PersonDetailInfoComponent gefolgt.

Jetzt in PersonDetailComponent Ich habe eine Service-Anfrage, um die Person Informationen aus dem Back-End abrufen und ich würde gerne die abgerufenen Person Informationen innerhalb der PersonDetailInfoComponent sowie.

Also meine Frage ist, ob Angular2 bietet eine integrierte Möglichkeit, wo ich auf Variablen von den Elternkomponenten zugreifen kann (z. B .: PersonDetailComponent.personModelFrom innerhalb PersonDetailInfoComponent zugreifen).

Gibt es eine von Angular empfohlene "richtige" Vorgehensweise oder ist dies eines der Dinge, bei denen jeder seine eigene benutzerdefinierte Lösung implementieren wird? Falls dies nicht ohne weiteres möglich ist, gibt es Pläne, diese Funktionalität später in einer späteren Version von Angular2 bereitzustellen?

Prost und vielen Dank im Voraus.

P.S.

Meine Abhängigkeiten/Versionen sind wie folgt:

"@angular/common": "2.0.0", 
"@angular/compiler": "2.0.0", 
"@angular/core": "2.0.0", 
"@angular/forms": "2.0.0", 
"@angular/http": "2.0.0", 
"@angular/platform-browser": "2.0.0", 
"@angular/platform-browser-dynamic": "2.0.0", 
"@angular/router": "3.0.0", 
"core-js": "^2.4.1", 
"rxjs": "5.0.0-beta.12", 
"ts-helpers": "^1.1.1", 
"zone.js": "^0.6.23" 

Answer 1

Ok so nach niemand antwortete, und nachdem ich durch die docs und API ging hin und fand nichts das ist, was ich tun endete:

Erstellt ein Datendienst

import { Injectable } from '@angular/core'; 

import { PersonModel } from '../models/person/person.model'; 

@Injectable() 
export class DataService { 

    private _person: PersonModel; 

    get person(): PersonModel { 
     return this._person; 
    } 

    set person(person: PersonModel) { 
     this._person = person; 
    } 

    constructor() { } 

} 

Dann in meiner Eltern Route Komponente (PersonDetailComponent) ich einen Anbieter für DataService hinzufügen, ich spritze es in den Konstruktor ein d Aktualisieren Sie das Objekt dataservice.person jedes Mal, wenn das neueste Personenobjekt vom Dienst abgerufen wird.

@Component({ 
    selector: 'person-detail', 
    templateUrl: './person-detail.component.html', 
    styleUrls: ['./person-detail.component.scss'], 
    providers: [DataService] 
}) 
export class PersonDetailComponent implements OnInit { 

    private _sub: Subscription; 
    public _person: PersonModel; 

    constructor(private _route: ActivatedRoute, private _router: Router, private _service: PersonService, private _ds: DataService) { } 

    ngOnInit() { 
     console.log("Loaded person detail component"); 
     this._sub = this._route.params.subscribe(params => { 
      let id = +params['id']; // (+) converts string 'id' to a number 
      this._service.get(id).subscribe(person => { 
       console.log(`Loaded person`, person); 
       this._person = person; 
       this._ds.person = person; 
      }); 
     }); 
    } 
} 

Da ist in meinem Kind Route Komponente (PersonDetailEditComponent) ich den Datendienst zu injizieren, und ich bekomme nur die Person, von dort aus.

@Component({ 
    selector: 'person-detail-edit', 
    templateUrl: './person-detail-edit.component.html', 
    styleUrls: ['./person-detail-edit.component.scss'] 
}) 
export class PersonDetailEditComponent implements OnInit { 

    constructor(private _ds: DataService) { } 

    ngOnInit() { 
     console.log('Loaded person-edit view for', this._ds.person); 
    } 

} 

Natürlich kann der Datendienst viel sauberer mit Themen/Observablen/Abonnent getan werden, aber ich wollte nur den allgemeinen Ansatz teilen.

Hoffe, das hilft jemandem auf der Straße.