Angular2 маршрутизатора - доступ к переменным родительскому компоненту внутри дочернего компонента

Question

я маршрутизация следующего модуля установка

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, 
       } 
      ] 
     } 
    ] 
} 
]; 

Так что, когда я пытаюсь открыть http://localhost:4200/persons/3/edit Angular2 сначала загружайте PersonsComponent с последующим PersonDetailComponent с последующим PersonDetailInfoComponent.

Теперь в PersonDetailComponent У меня есть запрос службы для извлечения информации о человеке из бэкэнд, и я хотел бы использовать полученную информацию Person внутри PersonDetailInfoComponent.

Итак, мой вопрос в том, имеет ли Angular2 встроенный способ доступа переменных к родительским компонентам (например: доступ к PersonDetailComponent.personModelfrom внутри PersonDetailInfoComponent).

Существует ли «правильный» способ, разрешенный угловыми углами, или это одна из тех вещей, где каждый сможет реализовать свое собственное решение? Кроме того, в случае, если это не доступно, существуют ли какие-либо планы по обеспечению этой функции по дороге в более поздней версии Angular2?

Приветствия и благодарности заблаговременно.

P.S.

Мои зависимостями/версии заключаются в следующем:

"@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

ИТАК после никто не ответил, и после того, как я прошел через документы и API и ничего не нашли, это то, что я в конечном итоге делает:

Создано служба данных

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() { } 

} 

Тогда в моей родительской маршруте компоненте (PersonDetailComponent) добавить поставщик для DataService, я впрыскивать его в конструкторе А.Н. d обновляйте объект dataservice.person каждый раз, когда мы получаем последний объект объекта из службы.

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

Тогда в моем ребенке маршрута компонента (PersonDetailEditComponent) Я впрыснуть услугу передачи данных, и я просто получить человек оттуда.

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

} 

Конечно службы данных можно сделать намного ровнее с предметами/наблюдаемыми/абонентов, но я просто хотел бы поделиться общий подход.

Надеюсь, что это поможет кому-то по дороге.