Панель навигации исчезает - 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>

Поместите селектор навигационного компонента на вершину того компонента, на который вы направляетесь, в раскрывающемся меню навигации, как.

Answer 2

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

Поместите селектор навигационного компонента на вершину того компонента, на который вы направляетесь, в раскрывающемся меню навигации, как.