typescript - property - Ocultar elementos basados en enrutamiento en Angular2 rc1

angular material

Question

Tengo algunos elementos que quiero en cada página, excepto la página de inicio de sesión. Me gustaría usar ngIf o posiblemente la propiedad oculta de los elementos para ocultar esos elementos cuando el usuario está en la página de inicio de sesión.

He intentado esto:

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

basado en esta pregunta y respuesta: En Angular 2, ¿cómo determina la ruta activa?

Y también he intentado esto:

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

pero no han tenido ningún éxito.

Para referencia aquí es el componente que coincide con este 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 documentación para isRouteActive es bastante delgada, la misma para generar. ¿Alguna dirección en una mejor manera de lograr este comportamiento?

Answer 1

Al menos con versiones más recientes de angular 2 y según el caso de uso específico. Puede transcluir el contenido y solo agregarlo al componente de la ruta donde lo desee. Mucho mejor que mantener una lista de rutas y usar las condiciones ngIf.

En su plantilla de componentes. Agrega un elemento ngcontent y usa select para darle un nombre

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

Luego puedes usar ese componente y transcluir el contenido.

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

O utilízalo sin hacer referencia al contenido transcluido.

<component>
</component>

Answer 2

Basado en el comentario de @michelangelo:

En tu componente:

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>

Answer 3

Ejemplo de 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>

Answer 4

Esto es lo que hice para el enrutador Angular2 RC5:

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

public location = '''' ;

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

En HTML:

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

Espero que esto ayude !

Answer 5

Hay un hack que podemos usar en algunos casos simples. Se basa en la directiva RouterLinkActive que se puede agregar no solo a los anclajes, sino también a sus padres. Entonces podemos hacer lo siguiente:

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

hidden es una clase de arranque estándar:

.hidden {
    display: none!important;
}

Cómo funciona: cuando está dentro del área de inicio de sesión, se agrega la clase hidden y no se ve el div . Una vez que navega a otra ruta, la clase hidden desaparece y el div es visible.

El inconveniente es que necesita tener un enlace con routerLink dentro de la div .

Answer 6

Pude encontrar la sintaxis que necesitaba para rc1 enterrada en un comentario aquí: En Angular 2, ¿cómo determina la ruta activa?

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

Answer 7

Puede ocultar / mostrar elementos al verificar la URL para el componente específico,

Modifique su archivo component.ts como este,

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

Utilice esta propiedad hideElement en component.html

<div [hidden]="hideElement">

Answer 8

Simplemente verifique el router.url en la plantilla:

my.component.ts

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

my.component.html

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

Answer 9

Todas las soluciones no funcionaron como se esperaba. Si tienes ruta con parámetros. Puede utilizar ES6 includes :

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

Answer 10

Tuve que hacer algo similar en mi código. Hice esto mediante programación al crear la lista de rutas en las que quería excluir que se muestre mi elemento.

En mi clase, inyecté el objeto Location de @angular/common .

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

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

Luego, en mi plantilla, uso el atributo hidden y lo vinculo a mi función.

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

Answer 11

router.generate([''/login'']) lugar de router.generate(''/login'') .

Esta sintaxis a veces es complicada.

Espero que esto te ayude en tu caso.