typescript - Angular 2 : How to pass route parameters to subroute?

使用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 {}

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

child 路由器在解析路由之前会从 parent 那里清除参数吗？那没有多大意义，所以我敢打赌我错过了一些东西。我的问题很简单:如何将路由参数传递给子路由？

PS:我试图为demo this setup构建一个插件，但是当我无法弄清为什么无法加载该应用程序时，我放弃了。

最佳答案

子路径实际上获得了它们自己的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实例。将服务注入(inject)子路由组件后，您将可以访问父路由参数。

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

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

关于typescript - Angular 2 : How to pass route parameters to subroute?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37403545/