仅在首次登录时显示初始用户设置组件

Question

我的 app.component.html:

中有 2 个组件 initial-settings 和 app-navbar

<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 组件。

我的问题是，如何实现这个逻辑，这意味着哪个是 show/hide 这两个组件的最佳方式，以及如何在用户保存后从初始设置组件重定向到 app-navbar 组件所需的设置数据。

我想我需要将路由器与路由器保护器一起使用，但我没有找到这个用例的任何示例，我会很清楚地理解这一点。我是 Angular 的新手，谢谢！

Answer 1

使用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']);
           }
          });
         }
       }

希望对大家有用！

仅在首次登录时显示初始用户设置组件

Show initial user setup component only on first login

angular

angular-route-guards