Masquer les éléments basés sur le routage dans Angular2 rc1

J'ai quelques éléments que je veux sur toutes les pages sauf la page de connexion. Je voudrais utiliser ngIf ou, éventuellement, la propriété hidden 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'))">

basé sur cette question et la réponse: Dans Angulaire 2 comment déterminer l'itinéraire actif?

Et ont également essayé ceci:

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

mais qui n'ont pas eu de succès.

Pour la référence ici est le composant qui correspond à ce 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 pour isRouteActive est assez mince, même pour les générer. N'importe quelle direction sur la meilleure façon d'atteindre ce comportement?

source d'informationauteur 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>

C'est ce que j'ai fait pour Angular2 RC5 routeur :

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

public location = '' ;

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

En HTML :

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

Espérons que cette aide !

10

J'ai été en mesure de trouver la syntaxe j'avais besoin pour la rc1 enterré dans un commentaire ici: Dans Angulaire 2 comment déterminer l'itinéraire actif?
```
<div *ngIf="!router.urlTree.contains(router.createUrlTree(['/login']))">
```
7

Que j'avais à faire quelque chose de semblable dans mon code. Je l'ai fait par programmation à la création de la liste de routes j'ai voulu exclure mon élément de preuve dans la.

Dans ma classe, j'ai injecté le Location objet de @angular/common.
```
public isHidden() {
  let list = ["/login"],
      route = this.location.path();

  return (list.indexOf(route) > -1);
}
```
Ensuite dans mon modèle, j'ai utiliser le hidden attribut et le lier à ma fonction.

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

Toutes les solutions n'ont pas fonctionné comme prévu. Si vous avez de la route avec des paramètres. Vous pouvez utiliser ES6 includes:
```
<div *ngIf="!_router.url.includes('login')">Show me except on login page</div>
```
5

Il y a un hack on peut utiliser dans certains cas simples. Il est basé sur RouterLinkActive directive qui peut être ajoutée non seulement pour les points d'ancrage, mais pour elle aussi, les parents. Afin que nous puissions effectuer les opérations suivantes:
```
<div routerLinkActive="hidden">
    <a routerLink="/login">Login</a>
</div>
```
hidden est une norme de classe de bootstrap:
```
.hidden {
    display: none!important;
}
```
Comment cela fonctionne: lorsque vous êtes à l'intérieur de la zone de connexion, le hidden de la classe est ajouté et vous ne voyez pas le div. Une fois que vous accédez à l'autre du parcours, la hidden classe disparaît et le div est visible.

L'inconvénient, c'est que vous avez besoin d'avoir un lien avec routerLink à l'intérieur de la div.
1

Au moins avec les versions plus récentes de angulaire 2 et selon le cas d'utilisation spécifiques.Vous pouvez transclude le contenu et ajouter uniquement sur la route de la composante où vous le souhaitez. Beaucoup mieux que le maintien d'une liste d'itinéraires et de l'aide ngIf conditions.

Dans votre modèle de composant.
Ajouter un ngcontent élément et utilisez select pour lui donner un nom
```
<ng-content select="[content-name]"></ng-content>  
```
Alors vous pouvez utiliser ce composant et transclude le contenu.
```
<component>
<div content-name> transcluded content</div>
</component>
```
Ou de l'utiliser sans faire référence à la transcluded contenu
```
<component>
</component>
```

Vous pouvez masquer/afficher les éléments par la vérification de l'url de composant spécifique,

Modifier votre composant.ts fichier 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;
      }
    }
  });
}

Utiliser cette hideElement propriété dans component.html

<div [hidden]="hideElement">

-3

Je voudrais essayer router.generate(['/login']) plutôt que router.generate('/login').

Cette syntaxe est parfois délicat.

J'espère que cela vous aide dans votre cas

Vous devez vous connecter pour publier un commentaire.