Как скрыть кнопки панели навигации компонента заголовка от маршрутизации в Angular 8? - PullRequest
Новая
       15

Как скрыть кнопки панели навигации компонента заголовка от маршрутизации в Angular 8?

0 голосов
/ 03 апреля 2020

Как я могу скрыть / показать кнопки панели навигации при переходе на страницу входа.

Ex- В моем компоненте приложения у меня есть компонент верхнего колонтитула, компонент выходного и нижнего колонтитула маршрутизатора В моем компоненте верхнего колонтитула у меня есть около 5 кнопок навигации, например: «Вход», «Регистрация», «О нас», «Связь с США» и т. Д. c. Теперь, что я хочу, это если кто-то нажимает на кнопку «Вход». Итак, форма входа в систему существует, и когда кто-то вошел в систему и перешел на страницу панели инструментов, заголовок не должен содержать параметры входа и регистрации.

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

1 Ответ

1 голос
/ 03 апреля 2020

Есть множество путей к этому. Это зависит от вашего механизма входа в систему. Допустим, пользователь вошел в систему, и вы храните некоторые учетные данные пользователя (токен JWT или другое свойство). Обычно он хранится в вашем локальном хранилище для простых реферальных целей.

Итак, ответ в основном -> пользователь * 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;
}

Также, если вы используете что-то подобное вышеупомянутому решению, не забудьте удалить значения из localalstorage, когда пользователь вышел из системы.

Итак, при входе в систему 

login() {
  // all your authentication code.
  localStorage.setItem("loggedIn", "value");
}

// где бы вам ни понадобилось проверить вход в систему, вы можете использовать localStorage.getItem("loggedIn");

...