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

Question

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

我试过这个：

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

基于这个问题和答案：

也试过这个：

 <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 所需的语法：

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

Answer 3

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

在我的 class 中，我注入了 @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 是一个标准 bootstrap class:

.hidden {
    display: none!important;
}

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

缺点是你需要在 div.

中有一个 link 和 routerLink

Answer 8

至少在 angular 2 的较新版本中，根据具体用途 case.You 可以嵌入内容，并且仅将其添加到您需要的路由组件上。比维护路由列表和使用 ngIf 条件要好得多。

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

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

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

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

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

<component>
</component>

Answer 9

您可以通过检查特定组件的 url 来 hide/show 元素，

像这样修改你的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>

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

Hide elements based on routing in Angular2 rc1

typescript

angular2-template

angular2-routing

angular