Ocultar y mostrar el componente angular 4 según la ruta

Ya no necesitas investigar más por todo internet porque estás al lugar correcto, poseemos la solución que quieres pero sin problema.

Solución:

comprobar el router.url en la plantilla:

 //component I want hidden unless url /home

en app.component.ts inyectar el router.

export class AppComponent 
  title = 'app';
  router: string;

  constructor(private _router: Router)

          this.router = _router.url; 
    

La respuesta aceptada no funcionó, porque creo que la variable se asignará solo una vez, luego cuando naveguemos, esa variable no se actualizará (componente ya inicializado).

Así es como lo hice. Inyectamos el enrutador en el componente que queremos ocultar:

constructor(private _router: Router)

entonces en nuestra plantilla:

  ... your component html ...

Esto es en referencia al comentario publicado por SUNIL JADHAV. En lugar de exponer el identificador del enrutador en las plantillas, podemos definirlo dentro de una función y llamarlo en la plantilla.

import  Component, OnInit  from '@angular/core';
import  Router  from '@angular/router';

@Component(
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
)
export class MyComponent implements OnInit 

  constructor(
    private router: Router,
  ) 

  ngOnInit() 
  


  /**
   * Check if the router url contains the specified route
   *
   * @param string route
   * @returns
   * @memberof MyComponent
   */
  hasRoute(route: string) 
    return this.router.url.includes(route);
  

Luego, en el archivo html podemos usarlo así

    First View




    Second View

Comentarios y calificaciones de la guía

Si entiendes que te ha sido de ayuda este artículo, te agradeceríamos que lo compartas con el resto entusiastas de la programación de esta forma contrubuyes a dar difusión a nuestra información.

---

---

Utiliza Nuestro Buscador