각도 2 숨기기 구성 요소

Question

내 템플릿처럼 보이는이

사용자가 로그인하지 않을 때 나는 <app-progress-bar></app-progress-bar>을 숨길 필요가

<app-progress-bar></app-progress-bar> 
<router-outlet></router-outlet> 

, 나는 사용자가 로그인하면 때, 확인하기 위해 경비를 사용하고 있습니다 사용자가 진행률 표시 줄에 로그인되어 있지 않으면 숨겨져 야합니다.

{ 
     path: 'login', 
     component: LoginComponent, 

    } 

이 경로는 변수 사용자의 ProgressBarComponent

Answer 1

스토어 사용자입니다 <app-progress-bar></app-progress-bar>을 숨겨야합니다. 사용자가 로그인하거나 값이 true 일 때 .. 진행 표시 줄이 작동합니다 .. 사용자가 false이거나 사용자가 로그인하지 않은 경우 user variable has null. 그래서 거기에 없을 것입니다.

<app-progress-bar *ngIf="user" ></app-progress-bar> 

도 일부 코드를 표시합니다. 다른 문제가 있다면. 이 문제는 * ngIf 구조 지시문을 사용하여 쉽게 해결할 수 있습니다. 나는이 응용 프로그램 진행 바 컴포넌트 사용하기 위해 당신에게

을 도움이되기를 바랍니다

export const routes: Route[] = [{ 
    path: '', 
    redirectTo: "login", 
    pathMatch: "full" 
}, 
{ 
    path: 'login', 
    component: LoginComponent 
}, 
{ 
    path: 'csvtemplate', 
    component: TemplateComponent, 
    canActivate: ['canActivateForLoggedIn'], 
    children: [{ 
     path: '', 
     redirectTo: 'dashboard' 
    }, 
    { 
     path:'dashboard', 
     component: DashboardComponent 
    }, 
    { 
     path: 'csvtimeline/:month/:year', 
     component: CsvTimelineComponent, 
     canActivate: ['canActivateForLoggedIn'], 
    },{ 
     path: 'adduser', 
     component: adduserComponent 
    } 
    ] 
}]; 

과 같은 경로에 canActivate: ['canActivateForLoggedIn'],가에서 그 후

export const ROUTES_PROVIDERS = [{ 
    provide: 'canActivateForLoggedIn', 
    useValue:() => !! Meteor.userId() <--- write your condition here.. i have used meteor.. i don't know what you have used 
}]; 

파일 canActivate 를 사용

귀하의 모듈 파일을 가져 와서 공급자에 넣어

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     RouterModule.forRoot(routes), 
    ], 
    declarations: [ 
     AppComponent, 
    ], 
    providers: [ 
     ...ROUTES_PROVIDERS 
    ], 
    bootstrap: [ 
     AppComponent 
    ] 
})