Angular 路由到另一个父级的命名路由

Question

小伙伴们好吗

我是 angular 的新手，正在尝试构建合适的路线导航系统到目前为止我有这个溃败：

{path: 'welcome',
  component: WelcomeComponent,
  children: [
    {path: 'login',
      component: LoginComponent,
    outlet: 'welcomeR'},
    {path: 'register',
      component: RegistrationComponent,
      outlet: 'welcomeR'},
    {path: '',
      component: StartComponent
    }
  ]},
  { path: 'user',
    component: UserComponent,
    canActivate: [RoutProtectionService],
    children: [
      {path: '',
        pathMatch: 'full',
      redirectTo: 'profile'},
      {path: 'profile',
       component: ProfileComponent,
        outlet: 'userR'
      },
      { path: 'browseTutors',
        component: TutorsBrowseComponent,
        outlet: 'userR'
      }]
  },
  {path: '**',
  redirectTo: '/welcome'}

正如您从结构中看到的那样，我的应用程序组件中有一个 <router outlet>，并且 userR/welcomeR 作为其中的子文件夹进行路由。

成功登录后，我想重定向到 user/profile 组件，但我不知道该怎么做... 如果我使用这样的东西：

      this.router.navigate([{outlets: { userR: ['profile']}}] );

它无法匹配任何溃败。如果我导航到 ['/user']，则不会显示个人资料。我也尝试过在类似问题上列出的其他方法，但它们似乎不起作用。例如：

  this.router.navigate(['/user','profile'];

我试过删除 outlet:'userR' 然后用'/user/profile'访问它，但是用这种方法，不会显示配置文件的内容。

作为替代方案，我还尝试在用户组件的“”路径上设置重定向到 'profile'，但这也不起作用...

Answer 1

我总是使用包含 <router-outlet></router-outlet> 的 baseRouterComponent 它是父路由对象。

要重定向，您可以使用 router.navigateByUrl("/user")

working example

Answer 2

只需确保您在以下组件中有一个 <router-outlet></router-outlet>：AppComponent、WelcomeCompoonent 和 UserComponent 模板。然后不要在您的路线定义或导航中使用命名出口。

Angular 路由到另一个父级的命名路由

Angular routing to named rout from another parent

angular

routing

web-deployment

angular-router