角度2：如何将路径参数传递给子路径？ [英] Angular 2: How to pass route parameters to subroute?

问题描述

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

Using Angular 2 rc.1 and TypeScript. I'm having a lot of trouble passing routing parameters to my component when the component is loaded in a subroute. I use the @angular/router-deprecated package.

，我将路由配置为：

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

这里是端点组件，我尝试在其中读取参数

Here is the endpoint component where I attempt to read the parameters

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的子路由

Here is the middleman component with the subroute to 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 {}

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

The parameters can be successfully read from the routeParams object of EndPointComponent when the component is loaded from the top-level route (eg: the route named 'Top' in the root component). However, the parameters are always empty when I navigate to EndPointComponent by going throug MiddleManComponent (eg: via the route named 'Sub' in the root component).

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

Do children routers scrub the parameters from parents before resolving the routes? That doesn't make much sense so I bet I'm missing something. My question is simply: how do I pass route parameters to a subroute?

PS：我尝试为演示此设置，但是当我不知道为什么无法加载应用程序时，我放弃了。

PS: I tried to build a plunker to demo this setup but I gave up when I couldn't figure out why the application doesn't load.

推荐答案

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

Child routes actually get their own instance of RouteParams, distinct from the parent route's. This is done to avoid naming collisions and facilitate encapsulation of the routed component.

与子路由加载的组件共享父路由参数的一种方法是通过

One way you can share a parent route's parameters with a component loaded by a child route is through a service.

@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实例。当您的服务注入子路由组件时，您将能够访问父路由参数。

The RouteParamService will be instantiated at the same route level as the MiddleManComponent and so will get the same instance of RouteParams. When your service gets injected into your child route component, you'll be able to access the parent route params.

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

If you need 2 instances of EndPointComponent to load at different route tree levels, you'll need another tier of parent route, I think; i.e. a routed component that encapsulates both MiddleManComponent and EndPointComponent, between RootComponent.

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

RootComponent is not routed, so you won't be able to instantiate RouteParams for the RouteParamService from it. RouteParams is provided by the <router-outlet> component.

这篇关于角度2：如何将路径参数传递给子路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！