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
}])

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

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

Answer 1

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

进行导航

要正确执行，您需要使用navigateByUrl代替navigate，就像这样

 this._router.navigateByUrl(path);

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

1 个答案: