Question

我使用ng serve并拥有此类路由配置

export const appRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: AuthComponent,
        children: [
          {
            path: 'login',
            component: LoginComponent
          },
          {
            path: 'registration',
            component: RegistrationComponent
          }
        ]
      },
      {
        path: 'restore',
        component: RestoreComponent
      },
      {
        path: 'newpass',
        component: NewPassComponent
      }
    ]
  }
];

和auth.component.html中的两个按钮

<nav>
  <ul>
    <li><a routerLink="/login" routerLinkActive="active-link">Login</a></li>
    <li><a routerLink="/registration" routerLinkActive="active-link">Sign up</a></li>
  </ul>
</nav>

当我点击登录链接时，angular导航我登录页面没有错误，但当我重新加载localhost:4200/login页面时，我收到此错误

Console screen

但页面加载成功，组件可以正常工作。

那么，我如何修复它以及为什么angular使第二个NavigationStart成为/ login /（登录）？

Answer 1

您不需要使用路径“”的子项。试着用这个：

export const appRoutes: Routes = [
  {
    path: 'pathToAuth', // change to your path
    component: AuthComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'registration',
        component: RegistrationComponent
      }
    ]
  },
  {
    path: 'restore',
    component: RestoreComponent
  },
  {
    path: 'newpass',
    component: NewPassComponent
  }
];

Answer 2

确定。我解决了这个问题。在AuthComponent中我有这段代码

let isAuthorized = await this.checkAuthorization();
if (isAuthorized) {
  this.router.navigate(['dashboard'], {relativeTo: this.route});
} else {
  this.router.navigate(['login'], {relativeTo: this.route});
}

所以我从/ login重定向到/ login / login但路由配置没有这个路径

Angular 4无法匹配任何路线

2 个答案: