Question

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

我试过这个：

<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的文档非常简洁，生成相同。有没有更好的方法来实现这种行为？

Answer 1

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

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

public location = '' ;

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

在HTML中：

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

希望这有帮助！

Answer 2

我能够在这里找到rc1所需的语法：In Angular 2 how do you determine the active route?

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

Answer 3

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

在我的课堂上，我从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 4

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

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

Answer 5

您可以通过检查特定组件的网址

来隐藏/显示元素

修改 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 6

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

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

hidden是一个标准的bootstrap类：

.hidden {
    display: none!important;
}

工作原理：当您进入登录区域时，会添加hidden课程，但您看不到div。导航到另一条路线后，hidden类消失，div显示。

缺点是您需要在routerLink内与div建立链接。

Answer 7

RxJS示例（可观察）：

serial_no

position_key

Answer 8

至少使用更新版本的角度2并具体取决于具体的用例。您可以转换内容并仅将其添加到您想要的路径组件上。比维护路由列表和使用ngIf条件要好得多。

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

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

然后您可以使用该组件并转换内容。

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

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

<component>
</component>

Answer 9

基于@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>

Answer 10

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

这种语法有时很棘手。

我希望这有助于您的情况

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

10 个答案: