Показывать компонент начальной настройки пользователя только при первом входе в систему

У меня есть 2 компонента: начальные настройки и панель навигации внутри моего app.component.html:

<initial-settings *ngIf="!userFloor"></initial-settings> <app-navbar *ngIf="userFloor"></app-navbar>

И мой app.component.ts:

export class AppComponent {
  public userFloor;

  constructor(private userFloorService: UserFloorService){}

  ngOnInit(){
    this.userFloorService.getJSON().subscribe(
      data => this.userFloor = data);
  }
}

Я хочу показать компонент начальных настроек только при первом входе пользователя, чтобы пользователь мог настроить некоторые вещи. При всех следующих входах пользователя приложение должно сразу же отображать второй компонент app-navbar, поскольку пользователь уже настроил эти необходимые вещи, и они хранятся в базе данных.

Итак, я использую сервис для получения данных. Если данные пусты, что означает, что пользователь входит в систему в первый раз, показать компонент начальной настройки. После сохранения данных перенаправьте на компонент app-navbar. Если данные не пустые, покажите компонент app-navbar.

Мой вопрос заключается в том, как реализовать эту логику, что означает, что это лучший способ показать/скрыть эти 2 компонента и как перенаправить из компонента начальных настроек в компонент приложения-навигации после того, как пользователь сохранит необходимые данные настройки.

Я думаю, что мне нужно использовать маршрутизатор с защитой маршрутизатора, но я не нашел ни одного примера этого варианта использования, который я бы достаточно ясно понял. Я новичок в Angular, спасибо!


angular angular-route-guards
person hawran    schedule 25.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

используя angular routing Вы можете создать функцию для этой логики! нравится...

app.component.ts

import { Router, ActivatedRoute } from '@angular/router';
export class AppComponent {
      public userFloor;
    
      constructor(private userFloorService: UserFloorService, private router: Router,){}
    
      ngOnInit(){
        this.userFloorService.getJSON().subscribe(
          (data) =>{ 
          if(data.length){
            this.router.navigate(['/PAGE-PATH']);
          }else {
            this.router.navigate(['/PAGE-PATH']);
           }
          });
         }
       }

надеюсь, это будет полезно для всех!

person Dako patel    schedule 27.11.2020