Angular2ルータ - 子コンポーネント

Question

内部からアクセスする親コンポーネント変数Iは、セットアップ

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がPersonDetailInfoComponent続いPersonDetailComponent続くロードします。

PersonDetailComponentでは、私はバックエンドから人物情報を取得するためのサービスリクエストを持っており、取得したPerson情報もPersonDetailInfoComponent内で使用したいと考えています。

私の質問は、Angular2が親コンポーネント（例：PersonDetailInfoComponent内のPersonDetailComponent.personModelfromにアクセスする）から変数にアクセスできる場所を提供するかどうかです。

これを行うための「正しい」角度付けられた方法がありますか、それとも誰もが独自のカスタムソリューションの実装を終わらせるようなものですか？また、容易に入手できない場合は、この機能を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

[OK]を誰も答えなかった後、私はドキュメントや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のプロバイダを追加し、私はコンストラクタANでそれを注入しますdサービスから最新のpersonオブジェクトを取得するたびに、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); 
    } 

} 

データサービスは、被験者/観測/加入者と多くのクリーナーを行うことができますが、私はちょうど一般的なアプローチを共有したいと思いました。

これは、誰かを助けてくれることを願っています。