如何在引导程序中设置导航链接到当前页面

Question

我在该应用程序中使用 Angular 应用程序，我为主页、关于、通知、注销创建了导航链接。

但是当我点击主页链接时，它会转到登录页面

但只有当我们点击主页和通知时，我才必须留在当前页面。

component.html

 <nav class="navbar navbar-expand-sm   navbar-light bg-light " id="navcolor">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
      aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <img src="assets/img/bbbs.jpeg" height="40" width="40" style="mix-blend-mode: multiply;opacity: 0.6;">ADDS
    &nbsp;
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

        <li class="nav-item">
          <a routerLink="#" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>
        </li>

        <li class="nav-item">
          <a routerLink="#" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications&nbsp;<span
              id="notificount">

            </span></a>


      </ul>
      <div class="social-part">
        <a href="#" id="col" style="color: black;" (click)="logout()"><i class="fa fa-sign-out"></i>Logout</a>

      </div>
    </div>
  </nav>

现在我的要求是当我点击主页或通知时，它必须保留在当前页面中。

谁能帮我解决这个问题。

Answer 1

我认为您想将导航栏放在顶部并在下面更改页面。如果这是您想要的，则将该导航栏标签放在组件中，并使用选择器将其放在路由器出口标签的顶部。
第 1 步：创建一个组件。
第 2 步：在您放置的 app.component.html 中，您在其上调用创建的导航栏组件。

<!--In your case the component you created may have different selector-->
<nav-bar><nav-bar>
<router-outlet></router-outlet>

Answer 2

当前页面的路由路径是什么？例如，如果路由器如下：

{ 
  path: 'home',
  component: HomeComponent
}

你必须把 routerlink 改成这个：

<a routerLink="/home" ...></a>

Answer 3

我想你可能有一个路由保护，它重定向到登录页面， 检查您的 app.route.ts 或 app.module.ts 中的“canActivate”属性，如下所示

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canActivate: [CanActivateTeam] ==> authenticates & re directs to login page if added so
      }
    ])
  ]