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>

将导航组件的选择器放到在单击导航下拉菜单中要路由的组件的顶部。

导航栏消失-Angular 7

2 个答案: