如何根据您所在的页面更改导航栏的内容，并放置正确的根？答案

【问题标题】：how to change the content of a navbar depending on the page you are on, and put the right roots?如何根据您所在的页面更改导航栏的内容，并放置正确的根？
【发布时间】：2021-04-30 13:14:13
【问题描述】：

您好，我的应用程序中有一个导航栏，我使用 root 来切换组件。这是我的 .html ：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <img src="assets/pictures/AVtech.png" style="width: 40px; height: 40px;"alt="">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="/desktop">Desktop<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/creationOne">Créer 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/creationTwo">Créer 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/connexion">Login</a>
      </li>
    </ul>
  </div>
</nav>

在我的 app-routing.mudule.ts 中有：

 { path: 'desktop', component: DesktopComponent },
 { path: 'creationOne', component: CreationOneComponent },
 { path: 'creationTwo', component: CreationTwoComponent },
 { path: 'connexion', component: ConnexionComponent }

我希望当我点击“登录”时，显示另一个替换第一个导航栏的导航栏。例如，为了拥有一个具有其他两个根的新导航栏：

{ path: 'profil', component: ProfilComponent },
{ path: 'work', component: WorkComponent },

你能帮帮我吗？

我编辑我的帖子：

所以在阅读了您的建议后，我这样做了：

<nav *ngIf="isLoggedIn(); else secondNavbar" class="navbar navbar-expand-lg navbar-light bg-light">
  <img src="assets/pictures/AVtech.png" style="width: 40px; height: 40px;"alt="">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="/desktop">Desktop<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/creationOne">Créer 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/creationTwo">Créer 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/connexion">Login</a>
      </li>
    </ul>
  </div>
</nav>

<ng-template #secondNavbar>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <img src="assets/pictures/AVtech.png" style="width: 40px; height: 40px;"alt="">
      <a class="navbar-brand" href="#"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav2">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="/profil">Profil<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/work">Work</a>
          </li>
        </ul>
      </div>
    </nav>
</ng-template>


<div class='container-fluid mt-3'>
  <router-outlet></router-outlet>
</div>

而且效果很好！非常感谢！

【问题讨论】：

标签： angular navbar root

【解决方案1】：

使用<ng-template> 在两个导航栏之间切换，使用 isLoggedIn() 之类的函数来判断用户是否登录。

<first-navbar *ngIf="isLoggedIn(); else secondNavbar"></first-navbar>

<ng-template #secondNavbar>
    <second-navbar></second-navbar>
</ng-template>

【讨论】：

非常感谢！