0

我有以下模块路由设置

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/editAngular2 时，首先会加载 PersonsComponent，然后是 PersonDetailComponent，然后是 PersonDetailInfoComponent。

现在在 PersonDetailComponent 中，我有一个从后端检索人员信息的服务请求，我也想在 PersonDetailInfoComponent 中使用检索到的人员信息。

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

是否有 Angular 认可的“正确”方式来做到这一点，或者它是否是每个人最终都会实施自己的定制解决方案的事情之一？此外，如果这不是现成的，是否有计划在以后的 Angular2 版本中提供此功能？

干杯并提前感谢。

附言

我的依赖项/版本如下：

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

1 回答 1

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

}

当然，数据服务可以通过主题/可观察对象/订阅者做得更干净，但我只是想分享一般方法。

希望这对未来的人有所帮助。

于 2016-09-23T23:01:29.943 回答