angular 2 新路由器 rc4 孩子的辅助路由不起作用答案

【问题标题】：angular 2 new router rc4 child's aux route doesn't workangular 2 新路由器 rc4 孩子的辅助路由不起作用
【发布时间】：2016-08-07 10:48:05
【问题描述】：

子路由内的辅助路由，不知道如何设置让它工作。我有根组件和路由配置文件，例如：

root.routes.ts     
 export const rootRoute:RouterConfig=[
       ...ChildrenRoute,
       {path:'',component:ChildrenRootComponent},
       {path:'children-root',component:ChildrenRootComponent},
       {path:'other',component:OtherComponent'}
  ];

 template:
          '<a routerLink='children-root'>Children root</a>
           <a routerLink='other'>Other</a>
           <router-outlet></router-outlet>'

和 ChildrenRootComponent 有 FirstComponent 和 SecondComponent 与路由配置文件，如：

 children.routes.ts    
     export const ChildrenRoute:RouterConfig=[
        {path:"",redirectTo:'/children-root',pathMatch:'full'},
        {path:'children-root',component:ChildrenRootComponent,
               children:[
                    {path:'',component:FirstComponent},
                    {path:'first',component:FirstComponent},
                    {path:'second',component:SecondComponent,outlet:'aux'}
               ]
        }
    ];
template:
         ' <a routerLink='first'>First</a>
              <router-outlet></router-outlet>
           <a routerLink='aux:second'>Second</a>
              <router-outlet name="aux"></router-outlet>'

现在从 Children root -> Second 的路线没问题，但是路线 Children root -> first 不起作用显示错误：

 Error: Cannot match any routes: 'children-root/second'

更改模板：

   ' <a routerLink='first'>First</a>
          <router-outlet></router-outlet>
     <a routerLink='(aux:second)'>Second</a>
          <router-outlet name="aux"></router-outlet>'

也不行。错误：

Error: Cannot match any routes: 'children-root/second)'

这里注意错误信息中的')'，不要有'('。在浏览器中直接设置url如下

 localhost:4200/children-root/(aux:second)

重新加载并运行良好。所以我想我设置 routerLink 错误，搜索了很多，没有找到任何关于这个的。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

RC.4 还不支持带有辅助路由的 routerLink。试试这样的：

<a href="/children-root/(aux:second)">Second</a>

【讨论】：

a href 可以转到 SecondComponent，但浏览器会重新加载整个页面，而不仅仅是在 router-outlet 中加载 SecondComponent。
此 href 不应重新加载页面。至少在我的应用程序中，我使用 HashLocationStrategy 并且与此类似的 URL 不会重新加载页面：<a href="#/children-root/(aux:second)">Second</a>
这仍然是 RC.5 中的一个问题。我想知道什么时候可以解决这个问题

【解决方案2】：

Rc4。还不能正确支持 routerLink。您可以使用navigateByUrl 或手动“a”标签来实现所需的结果。我假设当您尝试导航到第二个组件时，您的第一个组件是可见的。那就试试吧

this.router.navigateByUrl('/children-root/(first//aux:second)');

或者

<a href="/children-root/(first//aux:second)">Second</a>

路由URL形成的解释可以阅读this

【讨论】：

rc1和3.0.0.alpha.x如何更好地支持routerLink？有人用过吗？
3.0.0.beta2 是最新的路由器，没有更早的版本有更好的支持。角度包版本的其余部分无关紧要

【解决方案3】：

刚刚修好了。我们将在即将到来的 RC.5

中看到它的工作原理

related GitHub issue

【讨论】：