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中，我有一个服务请求从后端检索person信息，我还想在PersonDetailInfoComponent中使用检索到的Person信息。
因此，我的问题是，Angular2是否提供了一种内置的方式，可以访问父组件中的变量(例如:PersonDetailInfoComponent中的access PersonDetailComponent.personModelfrom )。
是否有一种角度上认可的“正确”的方式来做这件事，或者是其中之一，每个人都将最终实现他们自己的自定义解决方案？另外，如果这还不是现成的，那么是否有计划在以后的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"回答 1
Stack Overflow用户
发布于 2016-09-23 23:01:29
好的，在没有人回答之后，在我浏览了docs和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添加了一个提供程序，每当我们从服务中获得最新的person对象时，我就将它注入构造函数并更新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);
}
}当然，数据服务可以在主题/可观察/订阅者方面做得更干净，但我只是想分享一下一般的方法。
希望这能帮到路上的人。
https://stackoverflow.com/questions/39576366
复制相似问题
腾讯云开发者
