根据Angular2 rc1中的路由隐藏元素 [英] Hide elements based on routing in Angular2 rc1

问题描述

除登录页面外，我在每个页面上都有一些想要的元素.当用户位于登录页面上时，我想使用ngIf或元素的hidden属性来隐藏这些元素.

I have some elements I want on every page except the login page. I'd like to use ngIf or possibly the hidden property of the elements to hide those elements when the user is on the login page.

我已经尝试过了:

<div [hidden]="router.isRouteActive(router.generate('/login'))">

基于以下问题和答案:在Angular中2如何确定活动路径?

based on this question and answer: In Angular 2 how do you determine the active route?

并且也尝试过这种方法:

And have also tried this:

 <div *ngIf="!router.isRouteActive(router.generate('/login'))">

，但没有成功.

作为参考，这里是与此html匹配的组件.

For reference here is the component that matches this html.

import { Component, OnInit } from 'node_modules/@angular/core';
import { HTTP_PROVIDERS, XHRBackend } from 'node_modules/@angular/http';
import { Routes, Router, ROUTER_DIRECTIVES } from 'node_modules/@angular/router';

import { LoginService } from './login/login.service';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';

@Component({
    selector: 'portal',
    templateUrl: 'portal/portal.component.html',
    directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
    providers: [
        HTTP_PROVIDERS,
        LoginService
    ]
})

@Routes([
    { path: '/login', component: LoginComponent},
    { path: '/user/:username', component: UserComponent}
])

export class PortalComponent implements OnInit{
    private router: Router
    constructor() {}

    ngOnInit() {
        this.router.navigate(['/login']); 
    } 
}

isRouteActive的文档非常苗条，生成的文档也一样.有什么更好的方法来实现这种行为的方向吗?

The documentation for isRouteActive is pretty slim, the same for generate. Any direction on a better way to achieve this behavior?

推荐答案

在下面的注释中，我找到了rc1所需的语法:

I was able to find the syntax I needed for rc1 buried in a comment here: In Angular 2 how do you determine the active route?

<div *ngIf="!router.urlTree.contains(router.createUrlTree(['/login']))">

这篇关于根据Angular2 rc1中的路由隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！