Question

我的Angular 2路由器出了问题。我无法将其重定向到具有指定插座的特定子路由。我认为这是URL编码的问题。我希望有一个人可以帮助我。这是我的路线设置：

const appRoutes: Routes = [
  { 
    path: 'browse',                
    component: BrowseComponent, 
    children: [
      { 
        path: 'first', 
        component: BrowseFirstComponent,
        outlet: 'view'
      },
      { 
        path: 'second', 
        component: BrowseSecondComponent,
        outlet: 'view'
      },
      { 
        path: 'third', 
        component: BrowseThirdComponent, 
        outlet: 'view'
      },
    ] 
  },
  { path: 'search', component: SearchComponent },
  { path: '',       redirectTo: '/browse/(view:first)', pathMatch: 'full' },
];

如果我手动导航到http://mysrv/browse/(view:first)（每次在网址中输入），它就可以正常工作。但是如果我导航到http://mysrv/而路由器试图将我重定向到'browse /（查看％3Afirst）'，这不起作用：

EXCEPTION：未捕获（承诺）：错误：无法匹配任何路线：'browse /（view％3Afirst）'

我正在使用Angular 2.0.0和路由器Package 3.0.0

有人可以帮帮我吗？

Answer 1

您需要更新到更新的Angular2和Router版本。

这是一个已知问题，自大约2周后就已修复。

https://github.com/angular/angular/issues/12740

Answer 2

对于任何发现redirectTo和命名网点有问题并绊脚石的人。该票证自2017年以来一直开放，地址为子路线和命名的商店的redirectTo。

基本上，如果希望主组件重定向到其中一个子组件，则有2个选择。

1）需要为“ redirectTo”填写绝对的完整路径：

https://github.com/angular/angular/issues/18271

2）如果无法执行此操作（例如，您的路由嵌套包含“：id”之类的通配符），则可以通过Guard或在该父组件本身中执行重定向。基本上，您捕获了ActivatedRouteSnapshot以查看您是在父级本身还是在子级之一上（如果嵌套的“ children”数组为空，您知道您是在父级上）+捕获了RouterStateSnapshot以查看您所在的URL ），然后对所需孩子的网址执行“ navigateByUrl”。

canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.canActivate(route, state);
}


canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

  if (route.data.redirectToChild.length) {
    const oldUrl = state.url;

    // don't want to be on a child path already,
    // so check that:
    // - we are not already on a child route
    if (route.children.length < 1) {
      const newUrl = oldUrl + '/' +  '(my-outlet:my-child-path)';
      console.log(oldUrl);
      console.log(newUrl);
      this._router.navigateByUrl(newUrl);
    }
  }
}

Angular 2：如何将路由重定向到具有命名出口的子路由

2 个答案: