web-dev-qa-db-fra.com

Masquer les éléments en fonction du routage dans Angular2 rc1

J'ai quelques éléments que je veux sur chaque page sauf la page de connexion. J'aimerais utiliser ngIf ou éventuellement la propriété masquée des éléments pour masquer ces éléments lorsque l'utilisateur est sur la page de connexion.

J'ai essayé ceci:

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

sur la base de cette question et réponse: Dans Angular 2 comment déterminez-vous l'itinéraire actif?

Et j'ai aussi essayé ceci:

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

mais n'ont eu aucun succès.

Pour référence, voici le composant qui correspond à ce code 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']); 
    } 
}

La documentation d'isRouteActive est assez mince, la même chose pour générer. Toute direction sur une meilleure façon d'obtenir ce comportement?

typescriptangularangular2-routingangular2-template
25
Bob

J'ai pu trouver la syntaxe dont j'avais besoin pour rc1 enfouie dans un commentaire ici: Dans Angular 2 comment déterminez-vous l'itinéraire actif?

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

Il suffit de cocher la router.url dans le modèle:

my.component.ts

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

my.component.html

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

Voici ce que j'ai fait pour le routeur Angular2 RC5:

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

public location = '' ;

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

En HTML:

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

J'espère que cela t'aides !

19
Aswin Gopalan

Je devais faire quelque chose de similaire dans mon code. Je l'ai fait par programme en créant la liste des itinéraires que je voulais empêcher à mon élément de s'afficher.

Dans ma classe, j'ai injecté l'objet Location de @angular/common.

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

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

Ensuite, dans mon modèle, j'utilise l'attribut hidden et le lie à ma fonction.

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

7
hartpdx

Toutes les solutions n'ont pas fonctionné comme prévu. Si vous avez une route avec des paramètres. Vous pouvez utiliser ES6 includes:

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

Vous pouvez masquer/afficher les éléments en vérifiant l’url du composant spécifique,

Modifiez votre fichier composant.ts comme ceci,

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

Utilisez cette propriété hideElement dans composant.html

<div [hidden]="hideElement">
7
Mangesh Daundkar

Il y a un bidouillage que nous pouvons utiliser dans certains cas simples. Elle est basée sur la directive RouterLinkActive qui peut être ajoutée non seulement aux ancres, mais également à ses parents. Nous pouvons donc faire ce qui suit:

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

hidden est un standard bootstrap class:

.hidden {
    display: none!important;
}

Comment ça marche: lorsque vous êtes dans la zone de connexion, la classe hidden est ajoutée et vous ne voyez pas le div. Une fois que vous avez navigué sur une autre route, la classe hidden disparaît et la div est visible.

L'inconvénient est que vous devez avoir un lien avec routerLink à l'intérieur de div.

5
admax

Exemple RxJS (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>
2
Axel186

Au moins avec les versions plus récentes de angular 2 et en fonction du cas d'utilisation spécifique. Vous pouvez transclude le contenu et l'ajouter uniquement sur le composant de route où vous le souhaitez. Bien mieux que de conserver une liste des itinéraires et en utilisant des conditions ngIf.

Dans votre modèle de composant. Ajouter un élément ngcontent et utiliser select pour lui donner un nom

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

Ensuite, vous pouvez utiliser ce composant et transclude le contenu.

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

Ou utilisez-le sans faire référence au contenu inclus

<component>
</component>
1
marcus hall

Basé sur le commentaire de @ Michelangelo:

Dans votre composant:

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

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

En HTML:

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