Hide elements based on routing in Angular2 rc1

问题:

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.

I have tried this:

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

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'))">

but haven't had any success.

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']); 
    } 
}

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

回答1:

Simply check the router.url in the template:

my.component.ts

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

my.component.html

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

回答2:

This is what I did for Angular2 RC5 router :

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

public location = '' ;

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

In HTML :

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

Hope this helps !

回答3:

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']))">

回答4:

I had to do something similar in my code. I did this programmatically by creating the list of routes I wanted to exclude my element from showing in.

In my class, I injected the Location object from @angular/common.

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

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

Then in my template, I use the hidden attribute and bind it to my function.

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

回答5:

All of the solutions did not work out as expected. If you have route with parameters. You can use ES6 includes:

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

回答6:

You can hide/show elements by checking the url for specific component,

Modify your component.ts file like this,

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;
      }
    }
  });
}

Use this hideElement property in component.html

<div [hidden]="hideElement">

回答7:

There is a hack we can use in some simple cases. It is based on RouterLinkActive directive that can be added not only to anchors but to it's parents also. So we can do the following:

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

hidden is a standard bootstrap class:

.hidden {
    display: none!important;
}

How it works: when you are inside login area, the hidden class is added and you do not see the div. Once you navigate to another route, the hidden class disappears and the div is visible.

The drawback is that you require to have a link with routerLink inside the div.

回答8:

RxJS example (Observable):

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

回答9:

At least with more recent versions of angular 2 and depending on the specific use case.You can transclude the content and only add it on the route component where you want it. Much better than maintaining a list of routes and using ngIf conditions.

In your component template. Add an ngcontent element and use select to give it a name

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

Then you can use that component and transclude the content.

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

Or use it without referencing the transcluded content

<component>
</component>

回答10:

Based off of @Michelangelo's Comment:

In Your Component:

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

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

In HTML:

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

回答11:

I would try router.generate(['/login']) rather than router.generate('/login').

This syntax sometimes is tricky.

I hope this helps in your case