Rouer 콘센트 * ngIF

나는 다음과 같은 응용 프로그램 구조가 있습니다Rouer 콘센트 * ngIF

이

이 master.html - 내 응용 프로그램 구성 요소 HTML 템플릿 구조 :

: 이제

<header> 
<sidebar-right> 
<sidebar-left> 

<router-outlet> 

<footer>

.. 내가이 개 시나리오가를 손님

로그인 한 사용자

사용자가 손님 인 경우 사이드 바를 사용하지 않고 <intro></intro> 구성 요소를 표시해야하며 사용자가 로그인 한 회원이라면 사이드 바, 헤더 등 모든 태그가있는 라우터 콘센트를 표시하십시오 (사이드 바, 헤더 등)

내가 어떻게 할 수 있니? *ngIf 안에 router outlet을 사용할 수 없기 때문에 위에서 설명한대로 작동시키는 방법을 모릅니다.

아이디어가 있으십니까?

원하는 출력 아이디어 :

<section *ngIf="loggedIn"> 
<header> 
    <sidebar-right> 
    <sidebar-left> 

    <router-outlet> 

    <footer> 
</section> 
<section *ngIf="!loggedIn"> 
<intro></intro> 
</section>

출처

2016-08-17 TheUnreal

당신이 개 다른 경로를 사용하고, 예를 들어 로그인 할 때 빈 더미 구성 요소를 표시 할 수 있습니다. –

완벽한 해결책처럼 들리 진 않지만, 최선의 방법이라면 - 여러 경로를 사용하는 방법에 대한 참고 자료가 있습니까? – TheUnreal

무슨 뜻인지 확실치 않습니다. 여러 경로가 가장 일반적인 사용 사례입니다. https://angular.io/docs/ts/latest/guide/router.html –

가 게스트보기 및 두 개의 다른 경로에서 사용자보기를 넣고 다음 경로를 볼 수있는 것에 대한 조건으로 제공하는 경로 가드,를 추가합니다. 이것은 router-outlet 태그에서 작동한다면 * ngIf가 가지는 일을합니다.

로그인 한 사용자가 앱 구성 요소 HTML 템플릿과 자체 구성 요소를 볼 수있게하려는 내용을 이동합니다. 게스트 사용자의 내용에 대해서도 동일한 작업을 수행하십시오.

는 경로 구성에서 루트로 두 구성 요소를 추가하기위한 구성 요소의 'canActivate'값을 설정 로그인 한 사용자 가져온 '인증 가드 서비스'(사용자가 만든 것)에 :

import { AuthGuardService } from '../auth-guard.service'; 

const routes: Routes = [ 
    { path: 'guest', 
    component: guestComponent 
    }, 
    { path: 'logged-in-user', 
    component: loggedInUserComponent, 
    canActivate: [AuthGuardService] 
    } 
];

가드 서비스 만들기 :

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

@Injectable() 
export class AuthGuardService implements CanActivate { 
    loggedIn: boolean; 

    canActivate() { 
    return this.loggedIn; 
    } 
}

loggedInUser 구성 요소는 loggedIn 값이 true 일 때만 탐색하고 볼 수 있습니다.

당신은 angular.io 사이트의 문서이 더 찾을 수 있습니다 이 https://angular.io/docs/ts/latest/guide/router.html#!#guards

출처

2017-06-07 08:58:25

Rouer 콘센트 * ngIF

답변

관련 문제