Маршрутизатор 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.

Итак, мой вопрос заключается в том, предоставляет ли Angular2 встроенный способ доступа к переменным из родительских компонентов (например, доступ к PersonDetailComponent.personModel изнутри PersonDetailInfoComponent).

Есть ли «правильный» способ сделать это, одобренный Angular, или это одна из тех вещей, где каждый в конечном итоге реализует свое собственное решение? Кроме того, если это недоступно, есть ли какие-либо планы по предоставлению этой функции в более поздней версии 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"

angular angular2-router
person RVP    schedule 19.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, после того, как никто не ответил, и после того, как я просмотрел документы и 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);
    }

}

Конечно, сервис данных можно сделать намного чище с субъектами/наблюдаемыми/подписчиками, но я просто хотел поделиться общим подходом.

Надеюсь, это поможет кому-то в будущем.

person RVP    schedule 23.09.2016