如何从Angular 8中的路由中隐藏标题组件的导航栏按钮？

Question

我如何导航到登录页面时隐藏/显示导航栏按钮。

Ex-在我的应用程序组件中，我有标头组件，路由器出口和页脚组件在我的页眉组件中，我有大约5个导航按钮，例如，登录，注册，关于，联系我们等。现在，我要的是如果有人单击“登录”，那么，登录表单就在其中，当有人登录并移至仪表板页面时，页眉不应包含“登录”和“注册”选项。

Ex-再次通知标题页。下面是我的代码-

AppComponent.html

 <app-header></app-header>

 <router-outlet></router-outlet>

 <app-footer></app-footer>

app-routing.module.ts

const routes: Routes = [
      { path: '', component: HomeComponent },
      {path:'registration', component: RegistrationComponent},
      {path: 'login', component: LoginComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'header', component: HeaderComponent},
    ];

HeaderComponent.html

<div class="navbar-nav ml-auto">

            <a class="nav-item nav-link" routerLink="/login"><h4>Login</h4></a>
            <a class="nav-item nav-link" routerLink="/registration"><h4>Register</h4></a>
            <a class="nav-item nav-link" routerLink="/about"><h4>About</h4></a>
            <a class="nav-item nav-link" routerLink="/dashboard"><h4>Dashboard</h4></a>

 </div>

 So, How can i hide Login, Registration option once logged in successfully

Answer 1

所以答案基本上是->用户* ngIf在所有导航链接上。

使用html。

<a *ngIf="!loggedIn()" class="nav-item nav-link" routerLink="/login"><h4>Login</h4></a>
<a *ngIf="!loggedIn()" class="nav-item nav-link" routerLink="/registration">Register</h4></a>

在您的.ts文件中。

loggedIn() {
           return localstorgae.getItem("some credential you stored while user logged In") ? true : false;
}