路由器出口外部的Angular 2 Hide Component

Question

My template looks like this

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

I need to hide <app-progress-bar></app-progress-bar> when user is not logged in, I am using Guards to check if user is logged in, so when user is not logged in progress bar should be hidden.

 {
        path: 'login',
        component: LoginComponent,

    }

This route should hide <app-progress-bar></app-progress-bar> which is ProgressBarComponent

Answer 1

Store user in a variable user. when user is login or value is true.. our progress bar will work.. when user is false or user is not login user variable have null. so will not be there.

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

also show us some code. if you have some other issue. this problem you can easily solve using *ngIf structure directive.

using canActivate I hope this will help you

for app-progress-bar component use canActivate: ['canActivateForLoggedIn'],

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
    }
    ]
}];

and in same routes file

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
}];

after that in your module file import it and and put it in providers

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