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

问题描述

我正在使用该应用程序中的角度应用程序，我已经为主页，关于，通知，注销创建了导航链接。

但是当我单击主页链接时，它将进入登录页面

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

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>

现在我的要求是，当我单击房屋或通知时，房屋必须保留在其当前页面中。

有人可以帮我吗？

解决方法

我认为您可能有一个可以将其重定向到登录页面的路由防护， 如下所示在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
      }
    ])
  ]

,

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

{ 
  path: 'home',component: HomeComponent
}

您必须将routerlink更改为此：

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

,

我认为您想将导航栏放在顶部，并在下面更改页面。如果那是您想要的，则将该navbar标签放置在组件中，然后使用选择器将其放置在router-outlet标签的顶部。
步骤1：创建组件。
第2步：在放置其中的app.component.html中，在其顶部调用创建的导航栏组件。

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