Question

与this问题类似，我在Angular2路由器的Release Candidate版本中遇到嵌套路由问题。

目前，我有一个应用程序设置，路由定义如下

在src / client / app / app.component.ts

中

@Routes([
  // some other routes up here
  { path: '/', component: HomeComponent }
  { path: '/admin', component: AdminComponent }
])

在src / client / app / + admin / admin.component.ts

中

@Routes([
  // some other routes up here
  { path: '/dashboard', component: DashboardComponent  },
])

我应该注意AppComponent和AdminComponent都使用<router-outlet>。当您访问/admin/dashboard时，您将嵌套在AdminComponent的路由器插座中，该组件位于AppComponent的路由器插座中

因为我在管理部分工作，所以我希望在访问以/admin开头的任何路由时进行权限检查。如果用户没有适当的权限，则会将其导航到主页。目前，我试图实现这一目标的方式是

在src / client / app / + admin / admin.component.ts

中

ngOnInit(): void {
  if (the user does not have the right permissions) {
    this.router.navigate(['/']);
  }
}

这会导航到应用程序的根目录，但会从AdminComponent模板中抛出错误，因为它正在尝试为AdminComponent中的另一个路径构建routerLink。我的预感是，虽然路径是正确的，但我仍然在AdminComponent中的<router-outlet>。不知何故，这可能是由于新路由器需要相对路径。我不确定如何导航到应用程序的根目录并在正确的路由器插座中加载组件。我认为这可以通过旧的angular2路由器中的router.parent解决，但由于这不可用，我需要另一种解决方案。

这是登录控制台的错误。

    TypeError: Cannot read property 'map' of null
      at UrlTree.Tree.pathFromRoot (segments.ts:32)
      at _findUrlSegment (link.ts:87)
      at _findStartingNode (link.ts:98)
      at Object.link (link.ts:19)
      at Router.createUrlTree (router.ts:145)
      at RouterLink._updateTargetUrlAndHref (router_link.ts:55)
      at RouterLink.Object.defineProperty.set [as routerLink] (router_link.ts:43)
      at DebugAppView._View_AdminComponent0.detectChangesInternal (AdminComponent.template.js:247)
      at DebugAppView.AppView.detectChanges (view.ts:243)
      at DebugAppView.detectChanges (view.ts:345)

更新

以前，AdminComponent模板中的routerLink是相对路径，即

    <a [routerLink]="['dashboard']" title="Dashboard">Dashboard</a>

将它们更改为绝对路径似乎摆脱了错误并正确导航到根路径。现在：

    <a [routerLink]="['/admin/dashboard']" title="Dashboard">Dashboard</a>

Answer 1

错误消息表明您遇到此问题https://github.com/angular/angular/issues/8567。

我也没有看到您在/使用的问题代码中配置的路由this.router.navigate(['/']);。

Angular2 New（RC1）路由器，嵌套路由器出口导航

1 个答案: