라우터 콘센트가없는 각도 2 렌더링 페이지

Question

슬라이드 메뉴와 상단 탐색 메뉴가있는 HTML 템플릿이 있고 렌더링 기본 경로 페이지 용 블록이 있습니다. 이 같은 :

... 
<div class="content-wrapper"> 
    <router-outlet></router-outlet> 
</div> 
... 

그러나 후, 내 로그인 페이지가이 내용 래퍼 블록에 렌더링합니다. 렌더링을위한 코드 작성 방법 로그인 페이지없이 경로 개요 구성 요소? 나는 당신의 질문을 이해 해요 경우

Answer 1

라우터 콘센트를 계속 도울 수 있지만, 사용자가 로그인하지 않는 렌더링되는 경로를 방지하기 위해 라우터 가드를 사용합니다. 나는 여기에 대해 블로그 :

https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

Answer 2

(상단 탐색 및 슬라이드 메뉴를 렌더링 할 경우), 당신은 로그인하지 않은 사용자의 상위 탐색 및 슬라이드 메뉴를 숨길.

내 방법을이 일에 대한 이 컨트롤/컴포넌트를 <router-outlet></router-outlet>에 렌더링하는 페이지 밖으로 가져 와서 사용자가 로그인 할 때까지 숨길 수 있습니다 (아마도 사용자가 성공적으로 로그인 한 것을 보여주는 인증 서비스의 부울 속성을 통해).

그래서이 비슷한 :

<div class="content-wrapper"> 
    <top-nav *ngIf="authenticationService.userLoggedIn"></top-nav> 
    <slide-menu *ngIf="authenticationService.userLoggedIn"></slide-menu> 
    <router-outlet></router-outlet> 
</div> 

로그인 페이지가 라우터 콘센트에 렌더링, 성공적으로 사용자가 로그인이 플래그가 서비스에 설정 한 경우 다음 페이지가 렌더링되고 상단 이동/슬라이드 메뉴가 DOM에 추가됩니다. 내가 해제 방법 기본이야 경우

알려 어쩌면 나는 아직도

Answer 3

문제에 대한 올바른 해결책은 주위 router-outlet을 이동하지만, router-outlet (RO1)와 (RootComponent를 호출 할 수 있습니다) 하나 개의 추가 구성 요소를 사용하지만, 탐색 및 사이드 메뉴가없는 것은 아니다 . RO1에서 컴포넌트 인 NavMenuComponent을로드해야합니다 (nav, 사이드 메뉴 및 자체 router-outlet RO2 포함). 그런 다음 하위 경로를 사용하여 RO1에서 (탐색 및 사이드 메뉴가 있음) 또는 LoginComponent (탐색 및 사이드 메뉴 없음) 중 하나가로드되었는지 확인하십시오. RO2에는 현재 콘텐츠가로드됩니다.

모듈의 deafult 구성 요소가 RootComponent입니다 가정, 경로는 다음과 같이 표시됩니다

const appRoutes: Routes = [ 

    { path: 'login', component: LoginComponent }, 
    { 
    path: '', 
    redirectTo: 'login', 
    pathMatch: 'full' 
    }, 

    { 
    path: 'app', component: NavMenuComponent, 
    children: [ 
     { path: 'youorldpath1', component: YourOld1Component }, //the path will /app/youroldpath1 instead of /youroldpath1 
     { path: 'youorldpath2', component: YourOld2Component, canActivate: [CanActivateViaAuthGuard] }, 
     { path: '**', component: ErrorComponent } 
    ] 
    }, 

    { path: '**', component: ErrorComponent } 

]; 

RootComponent이 가질 수있는 유일한 :

이

<router-outlet></router-outlet> 

여기

더 많은 정보 : https://angular.io/guide/router#child-routing-component