Angular2路由器 - 從一個子組件

內部訪問父組件變量我有以下模塊路由設置Angular2路由器 - 從一個子組件

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中我有一個服務請求來從後端檢索人員信息，我也想在PersonDetailInfoComponent中使用檢索到的Person信息。

所以我的問題是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"

來源

2016-09-19 RVP

好了，所以之後沒有人回答，我通過文檔和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，我在構造函數中注入它每次我們從服務中獲取最新的人員對象時，都會更新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); 
    } 

}

當然的數據服務可以做到與學科/觀測/用戶會更加清晰，但我只是想和大家分享的一般方法。

希望這可以幫助別人的道路。

來源

2016-09-23 23:01:29 RVP

Angular2路由器 - 從一個子組件

回答

相關問題