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은 PersonDetailInfoComponent 다음 PersonDetailComponent 다음로드합니다.

이제 PersonDetailComponent에서 나는 백엔드에서 사람 정보를 검색하는 서비스 요청을 받았고 검색된 Person 정보를 PersonDetailInfoComponent 내부에서도 사용하고 싶습니다.

그럼 내 질문은 Angular2가 부모 구성 요소 (예 : PersonDetailInfoComponent 내부의 PersonDetailComponent.personModelfrom에 액세스)에서 변수에 액세스 할 수있는 inbuilt 방식을 제공하는지 여부입니다.

이 작업을 수행하는 데있어 "올바른"방법이 있습니까? 아니면 모두가 자신 만의 맞춤 솔루션을 구현하게 될 것입니까? 또한이 기능을 쉽게 사용할 수없는 경우 Angular2 이후 버전에서이 기능을 제공 할 계획이 있습니까?

환불 및 사전에 부탁드립니다.

P. 다음과 같이

내 종속/버전

은 다음과 같습니다

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

} 

.

희망이 있으면 길가에 도움이되기를 바랍니다.