角2隐藏部件

我的模板看起来像这样角2隐藏部件

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

我需要隐藏<app-progress-bar></app-progress-bar>在不登录的用户，我用逆天来检查用户是否已登录，所以当用户未登录进度栏应该隐藏。

{ 
     path: 'login', 
     component: LoginComponent, 

    }

这条路线应隐藏<app-progress-bar></app-progress-bar>这是一个可变的用户ProgressBarComponent

来源

2016-12-05 rishal

存储用户。当用户登录或值为真..我们的进度条将工作..当用户为false或用户不是登录用户变量有空。所以不会在那里。

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

也向我们展示了一些代码。如果你有其他问题。这个问题你可以使用* ngIf结构指令轻松解决。

使用canActivate 我希望这将有助于你

的应用，进度条组件使用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 
    } 
    ] 
}];

，并在同一路线文件

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

后，在您的模块文件将其导入并将其放入供应商

012中

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

来源

2016-12-05 07:12:42

谢谢你的回答，我已经知道这个，但不知道这是否是最好的方法。我遇到@CanActivate，但不知道如何在组件中实现它。 – rishal

@rishal我已经编辑了我的答案给你..我希望这会帮助.. –

角2隐藏部件

回答

相关问题