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

Question

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

我试过这个：

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

基于这个问答：In Angular 2 how do you determine the active route?

也试过这个：

 <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 的文档非常精简，generate 也是如此。有什么更好的方法来实现这种行为吗？

Answer 1

我会尝试router.generate(['/login']) 而不是router.generate('/login')。

这种语法有时很棘手。

我希望这对你的情况有所帮助

Answer 2

我能够在此处的评论中找到我需要的 rc1 语法：In Angular 2 how do you determine the active route?

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

Answer 3

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

在我的课堂上，我从@angular/common 注入了Location 对象。

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

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

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

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

Answer 4

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

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

public location = '' ;

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

在 HTML 中：

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

希望这会有所帮助！

Answer 5

只需检查模板中的router.url：

my.component.ts

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

my.component.html

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

Answer 6

所有解决方案都没有按预期进行。如果您有带参数的路线。可以使用 ES6 includes:

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

Answer 7

我们可以在一些简单的情况下使用 hack。它基于RouterLinkActive 指令，不仅可以添加到锚点，还可以添加到它的父节点。所以我们可以做到以下几点：

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

hidden 是一个标准的引导类：

.hidden {
    display: none!important;
}

工作原理：当您在登录区域内时，会添加 hidden 类，而您看不到 div。一旦您导航到另一条路线，hidden 类就会消失并且 div 是可见的。

缺点是您需要在div 内有一个带有routerLink 的链接。

Answer 8

至少对于 Angular 2 的更新版本并取决于特定的用例。您可以将内容嵌入并仅将其添加到您想要的路由组件中。比维护路由列表和使用 ngIf 条件要好得多。

在您的组件模板中。 添加一个 ngcontent 元素并使用 select 为其命名

<ng-content select="[content-name]"></ng-content>  

然后您可以使用该组件并嵌入内容。

<component>
<div content-name> transcluded content</div>
</component>

或者在不引用转入内容的情况下使用它

<component>
</component>

Answer 9

您可以通过检查特定组件的 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;
      }
    }
  });
}

在 component.html

中使用此 hideElement 属性

<div [hidden]="hideElement">

Answer 10

RxJS 示例（可观察）：

@Component({
  ...
})
export class AppComponent{
    hideElement$: Observable<boolean> = this.router.events
        .pipe(
            filter((event) => event instanceof NavigationEnd),
            map((data: any) => data.url === '/login')
        );
}

<ng-container *ngIf="!(hideElement$ | async)">
  <p>Hide me on Login page!</p>
</ng-container>

Answer 11

基于@Michelangelo 的评论：

在您的组件中：

import { Routes, Router } from 'node_modules/@angular/router';

export class YourComponent implements OnInit{
     constructor(public router: Router ) {
    }
}

在 HTML 中：

<ng-container *ngIf="!router.url.includes('admin')">
    <p>The content you want to hide when in the above url path</p>
</ng-container>