时间戳

首页 > 解决方案 > Angular2导航和子导航嵌套路由

angular - Angular2导航和子导航嵌套路由

问题描述

我有一个导航菜单和一个子导航菜单。你可以看到路由配置。

export const appRoutes: Route[] = [
{
  path: "user",
  component: UserComponent,
  children: [
    { path: "login", component: LoginComponent },
    { path: "register", component: RegisterComponent }
  ]
},
{
  path: "consultants",
  component: ConsultantsComponent,
  children: [
    {
      path: "find-consultant",
      component: FindConsultantComponent
    },
    { path: "login-consultant", component: LoginConsultantComponent }
  ]
}
];

导航菜单和子导航菜单是工作和加载组件。这里的场景是当我点击 user->register 时，RegisterComponent 被加载。后来我点击了consults->find-consultant，FindConsultantComponent被加载了。转回后User RegisterComponent未激活。我创建了一个 stackblitz https://stackblitz.com/edit/navbar-routing

标签： angular

解决方案

我已经检查了你的代码。我在advisors.component.html文件中发现了一个问题。请用以下代码替换您的代码，然后它会正常工作。

顾问.component.html

<div class="col-lg-5">
    <ul class="nav nav-underline">
        <li class="nav-item">
            <a class="nav-link" data-bs-target="#login" data-bs-toggle="tab" role="tab"
                routerLink="/user/login">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-target="#register" data-bs-toggle="tab" role="tab"
                routerLink="/user/register">Register</a>
        </li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

推荐阅读