如何将参数传递给 Angular 2 中的子路由器以进行深度链接？

Question

基本上，如果我有一个组件向子路由组件发出信号，例如：

@RouteConfig([
    {
        path: '/users/...', //CHILD ROUTING COMPONENT
        name: 'Users',
        component: UsersComponent,
        useAsDefault: true
    }
])
export class App {
   constructor(private _router: Router) {}
   ucFirst(str:string){
        var parts = str.split(' ');
         for(var i = 0, ilen = parts.length; i < ilen; i++){
            parts[i] = parts[i].charAt(0).toUpperCase() + parts[i].slice(1);
         }
         return parts.join(' ');
     }
   ngOnInit() {
     //Handle deep links if exist
     var baseHref = document.getElementsByTagName('base')[0].href;
        var path = location.href.replace(baseHref, '');

         if(path.length){
             let slugs = path.split('/');
             for(let i = 0, ilen = slugs.length; i < ilen; i++){
                slugs[i] = this.ucFirst(slugs[i]);
             }
             this._router.navigate(slugs);
         }
     }
 }

然后子路由器在其中一个路径中使用某种参数，例如：

@RouteConfig([{
    path: '/',
    name: 'UserList',
    component: UserListComponent,
    useAsDefault: true
},{
    path: '/:id', 
    name: 'UserView', 
    component: UserViewComponent
}])

如何使深层链接起作用？我可以使用代码访问孙子视图，但深层链接失败（错误无路由 'users/1'，其中 1 是 :id）。基本上我需要处理父路由器中的一半路径和子路由器中的一半路径，但我还没有找到这样做的方法。只要深层链接完全存在于父级中，我就可以使它们正常工作，但我正在处理一个更大的项目，并且希望使设置更加模块化。

我已将我的代码放入此插件中：https://plnkr.co/edit/7cKBEwQmFSJrDFWhL4EV?p=preview 它在本地工作（减去深层链接）但在我以前从未使用过的 plunker 上不起作用，所以我想这对我来说是一种简单的配置问题。但它至少让你对模块化的尝试有了一个概念。

Answer 1

我认为您正在尝试使用 url、

进行导航

要正确执行，您需要使用 navigateByUrl 而不是 navigate，像这样

 this._router.navigateByUrl(path);

如何将参数传递给 Angular 2 中的子路由器以进行深度链接？

How to pass parameters to child router in Angular 2 for deep linking?

routing

deep-linking

typescript

angular