1

en Angular saben como puedo mostrar un div solamente en una ruta que contenga id ?

const rutas: Routes = [
    {path: 'prod/detail/:productid', component: ProductDetailComponent, canActivate: [AuthGuard]}
];

por ejemplo si la ruta es http://localhost:4200/prod/detail/5ea51e2cfb986c7d84282d41

que me recomendarían ? Trate con router pero no pude realizarlo

Quiero mostrar un boton de regreso solamente en mi ruta de detalle, esto es el header

<mat-toolbar color="primary">
    <span>
        <a *ngIf="router.url === '/prod/detail/:productid'" id="poke" routerLink="/">
            <img [src]="arrow"
        />
        </a>
    </span>
    <span  ...

</mat-toolbar>


constructor(
    public route: Router,
    private autService: AutService
  ) {}

1 respuesta 1

0

Puedes lograrlo de la siguiente manera:

En tu header.component.ts agregas la siguiente logica.

 mostrarBotonRegresar = false


  constructor(private router: Router, public location: Location) {
    router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        console.log(e.url);

        this.mostrarBotonRegresar = e.url.includes('detalle/')
      }
    });
  }

Y en el header.component.html tu botón:

<button 

(click)='location.back()'
*ngIf="mostrarBotonRegresar"
>Retornar porque es detalle</button>

Estas son las importaciones que ocupas:

import { Router, NavigationEnd } from '@angular/router';
import { Location } from '@angular/common';

Ten cuidado con la importacion de Location. Hay otro que no se ocupa importar y da error.

Te dejo un ejemplo funcional aqui

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.