角度路由组件答案

【问题标题】：Angular Routing Components角度路由组件
【发布时间】：2018-05-17 01:30:14
【问题描述】：

我目前有以下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 打开不同组件（牙医、患者、管理员）并用它们替换应用组件内容的最佳方式是什么？提前致谢！

【问题讨论】：

标签： angular typescript authentication routing

【解决方案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}

];

【讨论】：

听起来不错，但是我如何通过类型检查打开患者/牙医/管理员？我应该使用 *ngIf 并检查用户类型是否对应或什么？
在您的 logging.service 中，您使用 router.navigate 发送到正确的路径。您可以使用路由守卫来限制导航（请参阅angular.io/guide/router#milestone-5-route-guards）。如果您想隐藏/显示 html 的一小部分，则必须使用 *ngIf