在Angular2 rc1中隐藏基于路由的元素

Question

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

我试过这个:

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

基于这个问题和答案:在Angular 2中,您如何确定活动路线？

并且还试过这个:

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

但没有取得任何成功.

这里参考的是与此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的文档非常简洁,生成相同.任何方向都有更好的方法来实现这种行为？

Answer 1

只需router.url在模板中查看:

my.component.ts

...
constructor(public router: Router){}
...

my.component.html

<div *ngIf="router.url != '/login'">
    <h2>Not in login!</h2>
</div>

Answer 2

这就是我为Angular2 RC5路由器所做的:

import {Router} from '@angular/router';

public location = '' ;

constructor(private  _router : Router) 
{      
  this.location = _router.url;
}

在HTML中:

<div *ngIf = "location == '/home' ">
</div>

希望这可以帮助 !

Answer 3

我能够在这里找到rc1所需的语法:在Angular 2中你如何确定活动路径？

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

Answer 4

我必须在我的代码中做类似的事情.我通过创建我想要排除我的元素的路线列表以编程方式完成此操作.

在我的班上,我注入了Location对象@angular/common.

public isHidden() {
  let list = ["/login"],
      route = this.location.path();

  return (list.indexOf(route) > -1);
}

然后在我的模板中,我使用该hidden属性并将其绑定到我的函数.

<div id="elementToHide" [hidden]="isHidden()"></div>

Answer 5

所有的解决方案都没有达到预期的效果.如果您有带参数的路线.你可以使用ES6 includes:

<div *ngIf="!_router.url.includes('login')">Show me except on login page</div>

Answer 6

您可以通过检查特定组件的URL来隐藏/显示元素,

像这样修改你的component.ts文件,

import { RouterModule, Router, NavigationEnd } from '@angular/router';

hideElement = false;

constructor(private router: Router) {
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationEnd) {
      if (event.url === '/login') {
        this.hideElement = true;
      }  else {
        this.hideElement = false;
      }
    }
  });
}

hideElement在component.html中使用此属性

<div [hidden]="hideElement">

Answer 7

我们可以在一些简单的案例中使用hack.它基于RouterLinkActive指令,不仅可以添加到锚点,还可以添加到它的父母身上.所以我们可以做到以下几点:

<div routerLinkActive="hidden">
    <a routerLink="/login">Login</a>
</div>

hidden 是一个标准的bootstrap类:

.hidden {
    display: none!important;
}

它是如何工作的:当你在登录区域内时,hidden会添加这个类而你却看不到div.一旦您导航到另一条路线,hidden该类就会消失并且div可见.

缺点是你需要在routerLink里面有一个链接div.