다른 사용자를위한 각도 라우팅보기

Question

3 가지 유형의 사용자에 대해 각도 4 앱에서 라우팅을 설정하려고합니다.

사용자가 로그인하면 내 app-component로 리디렉션됩니다. 내 라우터 콘센트에 다른 경로를 엽니 다 - I는 사용자의 유형이 그에 따라 내용을 확인 할

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

:이처럼 내 앱 component.html 보이는 것입니다. 당신에게 아이디어를 제공하기 위해 나는 당신에게 내가 갈거야 구조를 보여줍니다 :

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

그래서 내 프로젝트에과 같이 구성되어 나는 완전히 다른 견해를로드 할 사용자 유형에 따라. 나는 각 사용자, 다른 편집 프로필 구성 요소 등 다른 탐색 모음을 원한다. 한 번 로그인하면 app-component로 리다이렉트 할 때 사용자 유형을 수신 할 것이므로이를 달성하기위한 올바른 접근 방법은 무엇인가? 치과 의사 뷰 구성 요소, 환자보기 구성 요소 등등.

당신에게 더 나은 아이디어를 줄 수있는 대안이 있지만 라우팅과 함께 좋은 것입니다 : (면책 조항 : 나는 이것을 알고있다. 수 없습니다 : 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

이 대답은

보호대 (guard.service) 솔루션입니다 Angular.io documentation에 @abdul hammed answer 더 많은 정보를 기반으로했다 :

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