Question

我目前有以下index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dentist Appointment System</title>
  <base href="/" />
</head>
<body>
  <app-component>
    loading...
  </app-component>
</body>
</html>

我的app.component.html是：

<div class="main-container">
   <header class="header header-6">
      Dentists Appointment System
   </header>
   <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/login" routerLinkActive="active">Login</a>
      <a routerLink="/register" routerLinkActive="active">Register</a>
   </nav>
   <router-outlet></router-outlet>
</div>

应用路由：

const appRoutes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'register', component: RegisterComponent},
   {path: 'login', component: LoginComponent},
   {path: '**', component: HomeComponent}
];

@NgModule({
             imports: [
                RouterModule.forRoot(
                      appRoutes,
                      {
                         useHash: true,
                         enableTracing: false // <-- debugging purposes only
                      }
                )
             ],
             exports: [
                RouterModule
             ]
          })
export class AppRoutingModule {
}

我最终想做的是。最初你去主页。最重要的是，您有注册和登录导航选项。点击 - 它们出现在路由器插座中。在您登录或注册后，我想将每种类型的用户重定向到不同的组件，如：DentistComponent，PatientComponent，AdminComponent，我希望这些组件不仅可以替换路由器插座中的新功能，还可以替换我在顶部的导航栏（登录，注册和家庭）。然后在每个用户组件中，我将有不同的子组件和路由，最终不同的视图。

我收到当前登录的用户类型，如下所示：

ngOnInit(): void {
      this.userRole = CommonUtil.getSessionUserRole();
      console.log(this.userRole); //DENTIST, PATIENT, ADMIN
   }

所以我可以在我的app.component.ts ..

中访问它

使用userRole打开不同组件（牙医，患者，管理员）并用它们替换app-component内容的最佳方法是什么？提前谢谢！

Answer 1

使用儿童路径，如

const appRoutes: Routes = [
   {path:'', component:MainComponent, children:[
       {path: 'home', component: HomeComponent},
       {path: 'register', component: RegisterComponent},
       {path: 'login', component: LoginComponent},
   ]},
   {path:'Patient',component:PatienComponent,children:[
     {path:'...}
   ],
    {path:'Admin',component:AdminComponent,children:[..]},
    ...
   {path: '**', component: HomeComponent}

];

角度路由组件

1 个答案: