html - 导航栏消失 - Angular 7

Question

基本上，我正在构建一个以登录屏幕开始的网页，单击登录按钮后，会出现导航栏。现在，当我从导航下拉菜单中选择一个元素时，会出现下一个组件数据，但导航栏会消失。

注意:我不想在登录屏幕上使用导航栏，所以不能在 app.component.html 中包含它的选择器

App.component.html

 <div class="background-image">
 <router-outlet></router-outlet>
 </div>

login.component.html

    <router-outlet></router-outlet>
    <div class="content2">

    <h2 >Login</h2>
    <br>

    <form>
    <div class="form-group">
    <label style="margin: 5px">Username</label>

    <input type="text"  />

    </div>
    <div class="form-group">
    <label style="margin: 7.5px">Password</label>

     <input type="password" />

    </div>
    <div class="form-group">
    <button (click)="onclick()" [disabled]="loading" class="btn btn- 
     primary">Login</button>
    <a routerLink="/register" class="btn btn-link">Register</a>
    </div>
    </form>
    </div>

navbar.component.html

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="#">WelfarePortal</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" 
   data-target="#navbarSupportedContent" aria- 
   controls="navbarSupportedContent" aria-expanded="false" aria-l 
   abel="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
    </button>

     <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">


     <li class="nav-item active dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
    role="button" data-toggle="dropdown" aria-haspopup="true" aria- 
     expanded="false">
      ID Card
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" routerLink="/idcardReg">Apply ID Card</a>
      <a class="dropdown-item" routerLink="/idcardStatusView">View ID Card 
      Status</a>
      <a class="dropdown-item" routerLink="/idcardCreate">Create ID 
    Card</a>
      <router-outlet></router-outlet>   
     </div>
    </li>
    <li class="nav-item dropdown active">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
      role="button" data-toggle="dropdown" aria-haspopup="true" aria- 
    expanded="false">
      Pass
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Apply Pass</a>
      <a class="dropdown-item" href="#">View Pass Status</a>
      <a class="dropdown-item" href="#">View Pass History</a>
     </div>
      </li>
     </ul>
       <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" 
     placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" 
     type="submit">Search</button>
      </form>
   </div>

   </nav>

Answer 1

<nav-bar *ngIf="UserLogIn"></nav-bar> 
<router-outlet></router-outlet>

将导航组件的选择器放在您在点击导航下拉菜单上路由的组件的顶部。