Angular2, 공용 부분에 하나의 템플리트 사용 방법과 Admin 부분에 하나의 템플리트 사용 방법

Question

새 프레임 워크를 사용하기 시작합니다. 나는 admin과 public 부분에 대해 두 개의 별개의 템플릿을 갖고 싶다.

이 목표를 달성하는 방법을 모르겠습니다. 공공 및 관리 구성 요소를 래핑 할 루트 구성 요소에 대해 생각하고 있습니다.하지만 루스터 모듈로이 작업을 수행하는 방법을 모르겠습니다.

Root Template 
|_ public template 
    |_ View 1 
    |_ View 2 
|_ admin template 
    |_ Admin View 1 
    |_ Admin View 2 

Answer 1

:

여기에 경로 경비에 대한 몇 가지 추가 정보를 원하시면입니다. 해결 방법은 래퍼 구성 요소를 전달하는 것입니다. 경로는 this와 같이 children 배열 매개 변수로 중첩 될 수 있습니다.

const appRoutes: Routes = [ 
    { path: 'admin', component: AdminComponent }, 
    { path: 'public', component: PublicComponent, children: [ 
    { path : '', component: HomeComponent}, 
    { path : 'home', component: HomeComponent}, 
    { path : 'api', component: ApiComponent}, 
    { path : 'project', component: ProjectComponent}, 
    { path : 'blog', component: BlogComponent}, 
    { path : 'about', component: AboutComponent}, 
    ] }, 
    { path : '', redirectTo: 'public/home', pathMatch: 'full'}, 
    { path: '**', component: PageNotFoundComponent } 
]; 

공개 템플릿에는 AppComponent 템플릿과 마찬가지로 <router-outlet> 태그도 필요합니다.

Answer 2

당신은 관리자 또는 구성원 중 하나를 사용하여 경로를 정의 가드를 사용하고 경로의 수 :

[편집] 나는 이런 식으로 뭔가를 할 수 있습니다.

@Injectable() 
export class AdminGuard implements CanActivate { 

    constructor(private _authService: AuthService, private _router: Router) { } 

    canActivate() { 

     if (!this._authService.isAdmin) { 
      this._router.navigate(['/']); 
     } 

     return this._authService.isAdmin; 
    } 
} 

AuthGuard :

이

export const routes: Routes = [ 
    { path: '', component: PublicComponent }, 
    { path: 'member', component: MemberComponent, canActivate: [AuthGuard]}, 
    { path: 'admin', component: AdminComponent canActivate: [AdminGuard]}, 
]; 
export const routing = RouterModule.forRoot(routes); 

그런 다음 두 가드를 만들 : 그것은 당신의 요구에 맞도록

먼저 설치하여 노선이 당신이 그것을 확장 할 수 sould 매우 간단한 예입니다 회원 :

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private _authService: AuthService, private _router: Router) { } 

    canActivate() { 
     if (!this._authService.isAuthenticated) { 
      this._router.navigate(['/']); 
     } 

     return this._authService.isAuthenticated; 
    } 
} 

그리고 나서 mem의 상태를 유지하는 서비스가 필요합니다. 맥주. 공급자는 싱글 톤 (singleton)으로 이식되어 있으므로 값은 응용 프로그램을 통해 일관성을 유지합니다. 내가 길을 발견 https://angular.io/docs/ts/latest/guide/router.html