Angular：在页面加载时路由到不同的模块

Question

我最近开始研究 Angular（Angular 5），路由非常新，但很弱。我的应用程序有 3 个名为 Home, School, Office 的选项卡，我有两种类型的用户 Admin 和 non-admin。点击Office 标签后，管理员将被重定向到管理员页面，非管理员用户将被重定向到非管理员页面。

所以，为了这个要求，我做了这样的路由：

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    AdminModule,
    NonAdminModule
  ],
  declarations: [AppComnonent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

ngOnInit(){
 this.userIsAdmin = true;
}

app.component.html

<div *ngIf='!userIsAdmin '>
<non-admin-page></non-admin-page>
</div>
<div *ngIf='userIsAdmin '>
<admin-page></admin-page>
</div>

non-admin.module.ts

@NgModule({
      imports: [

      ],
      declarations: [NonAdminComnonent],
      exports: [NonAdminComnonent]
    })
    export class NonAdminPageModule { }

admin.module.ts

@NgModule({
      imports: [

      ],
      declarations: [AdminComnonent],
      exports: [AdminComponent]
    })
    export class AdminPageModule { }

管理页面.html

<div>I am ADMIN</div>

非管理员页面.html

<div>I am not an ADMIN</div>

我必须在页面加载时路由到不同的模块，我的路由是否正确？请指导我。

Answer 1

我会使用延迟加载：How to Route to Feature Module。

如果不试试这个：https://stackblitz.com/edit/angular-hd7ayj。

您的代码将是学校，而不是迪士尼。

查看我的个人资料以查看实际应用。

希望这会有所帮助。编码愉快。

Answer 2

在您的情况下，您只是根据同一组件中的条件显示 admin 和 non-admin html。 如果你想使用路由来区分，你可以使用下面的过程，

1. 创建一个标志来区分用户（正如您已经完成的那样）
2. 根据此条件创建选项卡。有两个用于办公室的选项卡项目 - 一个路由到 admin，另一个路由到 non-admin，并根据标志仅显示其中一个。

这样您可以区分管理员和非管理员的组件。