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 中，我有一个从后端检索人员信息的服务请求，我也想在 PersonDetailInfoComponent 中使用检索到的人员信息。

所以我的问题是 Angular2 是否提供了一种内置方式，我可以从父组件访问变量（例如：访问 PersonDetailInfoComponent 中的 PersonDetailComponent.personModelfrom）。

是否有 Angular 认可的 "right" 方法来执行此操作，或者这是每个人最终都会实施自己的自定义解决方案的方法之一？此外，如果这不容易获得，是否有任何计划在以后的 Angular2 版本中提供此功能？

干杯，提前致谢。

P.S.

我的dependencies/versions如下：

"@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 添加了一个提供者，我将其注入构造函数并更新 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);
    }

}

当然，数据服务可以用 subjects/observables/subscribers 做得更干净，但我只是想分享一般方法。

希望这对以后的人有所帮助。

Angular2 路由器 - 从子组件内部访问父组件变量

Angular2 router - accessing parent component variables from inside a child component

angular

angular2-router