0

我的app.component.html中有 2 个组件 intial-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 组件。

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

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

4

1 回答 1

0

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

希望它对所有人有用！

于 2020-11-27T10:43:33.323 回答