Angular 不同用户的角度布线视图

我正在尝试在Angular 4应用程序中为3种类型的用户设置路由

一旦用户登录，他将被重定向到我的应用程序组件。这就是my app-component.html的外观：

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

因此，根据用户类型，我希望加载完全不同的视图，这些视图的结构与我的项目中的相同。我想为每个用户提供不同的导航栏、不同的编辑配置文件组件等。。什么是实现这一点的正确方法，因为一旦登录，我将在重定向到应用程序组件时收到用户类型，因此我将能够将其发送到它的孩子-牙医视图组件、患者视图组件等

给你一个更好的想法，类似于一个替代方案，但有路由将是伟大的：（免责声明：我知道这是不可能的：D） 在app.component.html中：

因为我对这一点还不熟悉，而且还在想办法，我想知道我是朝着正确的方向走，还是完全走错了方向。任何建议都将不胜感激

这个答案是基于 更多信息请访问

防护是解决方案（防护。服务）：

你必须更新你的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 { }

<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>

    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) { }
    }

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 { }