不同用户的角路由视图

Question

我试图在Angular 4应用中为3种类型的用户设置路由。

用户登录后，他将被重定向到我的应用程序组件。 这是我的app-component.html的样子：

<div class="main-container">
  <div class="wrapper">
    <router-outlet></router-outlet>
  </div>
</div>

我想检查用户的类型，并根据它-在路由器出口中打开一条不同的路由。 为了给您一个想法，我将向您展示我要使用的结构：

index.html
>app-component
>register-component
>login-component
>dentist-view
  schedule component
  patients component
  profile component
  appointments component  etc..
>admin-view
  manage users component
>patient-view
  ambulatory-lists component
  profile component
  dentist search component
  book appointment component etc..

因此，根据用户类型，我想加载完全不同的视图，这些视图的结构类似于我的项目。 我想要为每个用户使用不同的导航栏，使用不同的编辑配置文件组件等。实现此目的的正确方法是什么，因为登录后，我将收到重定向到应用程序组件的用户类型，因此我可以发送它是给孩子的-牙医视图组件，患者视图组件等。

为了给您一个更好的主意，类似的替代方法，但是使用路由将是很棒的：（免责声明：我知道这是不可能的：D）在app.component.html中 ：

<div class="main-container">
  <div class="wrapper">
    <router-outlet>
     <dentist-component *ngIf="isDentist()"></dentist-component>
     <patient-component *ngIf="isPatient()"></patient-component>
     <admin-component *ngIf="isAdmin()"></admin-component>
   </router-outlet>
  </div>
</div>

因为我是新手，但仍然想弄清楚问题，所以我想知道我是朝正确的方向走还是走完全错误的路。 任何建议都很好。

Answer 1

该答案基于@abdul hammed答案 Angular.io文档中的更多信息

解决方案是卫兵（ guard.service ）：

    import { Injectable }     from '@angular/core';
    import { CanActivate }    from '@angular/router';
    import { Router } from '@angular/router';

    @Injectable()
    export class Guard implements CanActivate {
      canActivate() {

    if (this.user && this.user.profile.role == 'Dentist') {
             this.router.navigate(['dentist']);
        } if else (this.user && this.user.profile.role == 'Patient') {
            this.router.navigate(['patient']);
        } ...

        return true;
      }

 constructor(private router: Router) { }
    }

而且您必须更新app.module文件，

import { Guard } from './_services/guard.service';
import { DentistComponent } from './dentist/dentist.component';
import { PatientComponent } from './dentist/patient.component';
@NgModule({
  declarations: [
    AppComponent,
    DentistComponent,
    PatientComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,

    RouterModule.forRoot([
        {
          path: 'dentist',
          component: DestistComponent,
          canActivate:[Guard]
        },
        {
        path: 'patient',
        component: PatientComponent,
        canActivate:[Guard]
       }
    ])
  ],
  providers: [Guard],
  bootstrap: [AppComponent]
})
export class AppModule { }