Nascondi elementi basati sul routing in Angular2 rc1

Question

Ho alcuni elementi che desidero su ogni pagina tranne la pagina di accesso. Mi piacerebbe usare ngIf o possibilmente la proprietà nascosta degli elementi per nascondere quegli elementi quando l'utente è nella pagina di login.

Ho provato questo:

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

basa su questa domanda e risposta: In Angular 2 how do you determine the active route?

e hanno anche provato questo:

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

ma non hanno avuto alcun successo.

Per riferimento qui è il componente che corrisponde a questo 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 documentazione di isRouteActive è piuttosto ridotta, lo stesso per la generazione. Qualche direzione su un modo migliore per ottenere questo comportamento?

Answer 1

sono stato in grado di trovare la sintassi di cui avevo bisogno per RC1 sepolto in un commento qui: In Angular 2 how do you determine the active route?

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

Answer 2

Vorrei provare router.generate(['/login']) anziché router.generate('/login').

Questa sintassi a volte è complicata.

Spero che questo aiuta nel tuo caso

Answer 3

che dovevo fare qualcosa di simile nel mio codice. L'ho fatto programmaticamente creando l'elenco di percorsi che volevo escludere dalla visualizzazione del mio elemento.

Nella mia classe, ho iniettato l'oggetto Location da @angular/common.

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

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

Poi, nel mio modello, ho utilizzare l'attributo hidden e associarlo alla mia funzione.

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

Answer 4

Questo è quello che ho fatto per il router RC5 Angular2:

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

public location = '' ; 

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

In HTML:

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

Spero che questo aiuti!

Answer 5

È sufficiente selezionare la router.url nel modello:

my.component.ts

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

my.component.html

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

Answer 6

Tutte le soluzioni non hanno funzionato come previsto. Se hai percorso con parametri.È possibile utilizzare ES6 includes:

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

Answer 7

C'è un hack che possiamo usare in alcuni casi semplici. Si basa sulla direttiva RouterLinkActive che può essere aggiunta non solo alle ancore ma anche ai genitori. Così possiamo fare quanto segue:

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

hidden è una classe di bootstrap di serie:

.hidden { 
    display: none!important; 
} 

Come funziona: quando ci si trova nell'area di accesso all'interno, si aggiunge la classe hidden e non si vede la div. Una volta che si passa a un'altra rotta, la classe hidden scompare e il div è visibile.

Lo svantaggio è che è necessario disporre di un collegamento con routerLink all'interno di div.

Answer 8

Almeno con versioni più recenti di angular 2 e in base al caso d'uso specifico. È possibile escludere il contenuto e aggiungerlo solo al componente del percorso in cui lo si desidera. Molto meglio che mantenere un elenco di percorsi e utilizzare le condizioni di ngIf.

Nel modello del componente. Aggiungere un elemento ngcontent e utilizzare selezionare per dargli un nome

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

quindi è possibile utilizzare quel componente e transclude il contenuto.

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

O usarlo senza fare riferimento al contenuto transclusa

<component> 
</component>