如何从父组件获取RouteParams?
应用:
- @Component({
- ...
- })
- @RouteConfig([
- {path: '/',component: HomeComponent,as: 'Home'},{path: '/:username/...',component: ParentComponent,as: 'Parent'}
- ])
- export class HomeComponent {
- ...
- }
然后,在ParentComponent中,我可以很容易地获取我的用户名参数并设置子路由。
父母:
- @Component({
- ...
- })
- @RouteConfig([
- { path: '/child-1',component: ChildOneComponent,as: 'ChildOne' },{ path: '/child-2',component: ChildTwoComponent,as: 'ChildTwo' }
- ])
- export class ParentComponent {
- public username: string;
- constructor(
- public params: RouteParams
- ) {
- this.username = params.get('username');
- }
- ...
- }
但是,那么,我如何在这些子组件中获得相同的“username”参数?做与上面相同的技巧,不这样做。因为那些参数是在ProfileComponent或者是?? ??
- @Component({
- ...
- })
- export class ChildOneComponent {
- public username: string;
- constructor(
- public params: RouteParams
- ) {
- this.username = params.get('username');
- // returns null
- }
- ...
- }
更新:
现在Angular2 final正式发布,正确的方法是这样做的:
- export class ChildComponent {
- private sub: any;
- private parentRouteId: number;
- constructor(private route: ActivatedRoute) { }
- ngOnInit() {
- this.sub = this.route.parent.params.subscribe(params => {
- this.parentRouteId = +params["id"];
- });
- }
- ngOnDestroy() {
- this.sub.unsubscribe();
- }
- }
原版的:
这里是如何使用“@ angular / router”:“3.0.0-alpha.6”包:
- export class ChildComponent {
- private sub: any;
- private parentRouteId: number;
- constructor(
- private router: Router,private route: ActivatedRoute) {
- }
- ngOnInit() {
- this.sub = this.router.routerState.parent(this.route).params.subscribe(params => {
- this.parentRouteId = +params["id"];
- });
- }
- ngOnDestroy() {
- this.sub.unsubscribe();
- }
- }
在此示例中,路由具有以下格式:/ parent /:id / child /:childid
- export const routes: RouterConfig = [
- {
- path: '/parent/:id',children: [
- { path: '/child/:childid',component: ChildComponent }]
- }
- ];