Angular 2：如何将路由参数传递给子路由？

Question

使用 Angular 2 rc.1 和 TypeScript。当组件加载到子路由中时，我在将路由参数传递给我的组件时遇到了很多麻烦。我使用@angular/router-deprecated 包。

在我的根组件中，我这样配置路由：

@RouteConfig([
  {path:'/top', name:'Top', component: EndPointComponent},
  {path:'/sub/...', name:'Sub', component: MiddleManComponent}
])

这是我尝试读取参数的端点组件

import {Component} from '@angular/core';
import {RouteParams} from '@angular/router-deprecated';
@Component({
    template: 'Route Params: {{routeParams.params | json}}'
})
export class EndPointComponent{
    constructor(private routeParams:RouteParams){}
}

这是 中间人组件，其中包含到 EndPointComponent 的子路由

import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {EndPointComponent} from "./endpoint.component";

@Component({
    directives: [ROUTER_DIRECTIVES]
    template: `<router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true}
])
export class MiddleManComponent {}

从顶级路由加载组件时，可以从EndPointComponent的routeParams对象成功读取参数（例如：根组件中名为'Top'的路由）。但是，当我通过MiddleManComponent 导航到EndPointComponent 时，参数始终为空（例如：通过根组件中名为“Sub”的路由）。

子路由器在解析路由之前是否会从父路由器中清除参数？这没有多大意义，所以我打赌我错过了一些东西。我的问题很简单：如何将路由参数传递给子路由？

PS：我尝试为demo this setup 构建一个 plunker，但当我无法弄清楚为什么应用程序无法加载时我放弃了。

Answer 1

子路由实际上有自己的 RouteParams 实例，与父路由不同。这样做是为了避免命名冲突并促进路由组件的封装。

您可以通过服务与子路由加载的组件共享父路由的参数。

@Injectable()
export class RouteParamService {
  constructor(private routeParams: RouteParams) {}

  get params() {
    return this.routeParams.params;
  }
}

@Component({
    template: 'Route Params: {{routeParams.params | json}}'
})
export class EndPointComponent{
    constructor(private routeParams:RouteParamService){}
}

@Component({
  directives: [ROUTER_DIRECTIVES]
  template: `<router-outlet></router-outlet>`,
  providers: [RouteParamService]
})
@RouteConfig([
  {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true}
])
class MiddleManComponent() { }

RouteParamService 将在与 MiddleManComponent 相同的路由级别实例化，因此将获得相同的 RouteParams 实例。当您的服务被注入您的子路由组件时，您将能够访问父路由参数。

如果您需要 2 个 EndPointComponent 实例在不同的路由树级别加载，我认为您将需要另一层父路由；即在 RootComponent 之间封装 MiddleManComponent 和 EndPointComponent 的路由组件。

RootComponent 没有路由，因此您将无法从中为 RouteParamService 实例化 RouteParams。 RouteParams 由<router-outlet> 组件提供。

Answer 2

使用@angular/router@3.4.7，您可以访问父ActivatedRoute

export class ChildComponent implements OnInit {

  parentRouteId: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.parent.params
      .subscribe((params: Params) => this.parentRouteId = params['id']);
  }
}

Answer 3

使用 "@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',
        component: ParentComponent,
        children: [
            { path: '/child/:childid', component: ChildComponent }]
    }
];

Answer 4

您可以注入ActivatedRote 并拍摄快照，更简单：

constructor(private route: ActivatedRoute) {}; ngOnInit() { console.log('one of my parents route param:', this.route.snapshot.parent.params['PARAM-NAME']); }