在子路线中保留路线参数？

Question

就我而言，我有一些看起来像这样的路线。

const appRoutes: Routes = [
   { 
       path: 'thing/:id',
       component: GenericComponent 
   },
   { 
       path: 'thing/special', 
       loadChildren: 'app/modules/thing/special.module#SpecialModule'
   }
];

最终，SpecialModule需要延迟加载并且它有自己的子路由。目前子路由是这样的：

const specialRoutes: Routes = [
    {
        path: '',
        component: SpecialComponent
    }
];

本质上，SpecialComponent 可能会扩展 GenericComponent，因为它所做的只是将新组件（重）添加到现有的通用池中。

所以 GenericComponent 将去请求 :id 并且很棒，但是 SpecialComponent 已经从参数中丢失了 :id。 ID 成为子路由。所以现在 id 为空，我无法加载 /mock-server/thing/null。

如何在我的子路由参数中保留或访问缺失的 :id？

Answer 1

您可以在 ActiveRouteSnapshot 上使用父级：

route.parent.params['id']

我的方法是在你的路由中使用解析器来获取子路由等的数据......在这个例子中：IDResolver

import { IDResolver } from '../../app.resolver';

const routes: Routes = [
  {
    path: ':id',
    component: LayoutComponent,
    children: [
      {path: '', redirectTo: 'something', pathMatch: 'full'},
      {path: 'something', component: SomethingComponent, resolve: {IDResolver}}
    ]
  }
];

在你的 app.resolver

import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class IDResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return Observable.of(route.parent.params['id']);
  }
}

export const APP_RESOLVER_PROVIDERS = [
  IDResolver
];

不要忘记导入主模块

 providers: [APP_RESOLVER_PROVIDERS]

希望这对你有用祝你好运:-)

哦，是的，在您的 Component.ts 中，您的 "id" 有：

  constructor(private route: ActivatedRoute) {
    route.snapshot.data.IDResolver.subscribe((result: any) => console.log(result.id));
  }

我使用路由解析器的原因是它允许您在导航到新路由之前获取数据。

在子路线中保留路线参数？

Preserve Route Params in child routes?

angular2-routing

angular