Estoy trabajando en una aplicación de comercio electrónico cuyo front-end está hecho en Angular 13.
La interfaz de usuario tiene una barra lateral que no quiero mostrar en la página de detalles del producto .
Para ello, en app\app.component.ts tengo:
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'E-commerce'; constructor(private router: Router) {} ngOnInit() {} /** * Check if the router url contains the specified route * * @param {string} route * @returns * @memberof AppComponent */ hasRoute(route: string) { return this.router.url.includes(route); } } En app\app.component.html :
<div class="app-wrapper"> <app-navbar></app-navbar> <div class="container"> <div class="row my-3"> <div *ngIf="!hasRoute('products/show/:id')" class="col-sm-6 col-md-4 col-lg-3"> <app-sidebar class="app-sidebar"></app-sidebar> </div> <div class="col-sm-6 col-md-8 col-lg-9"> <router-outlet></router-outlet> </div> </div> </div> <app-footer class="app-footer"></app-footer> </div>Por una razón que no he podido entender, esta solución falla y la barra lateral se muestra en cualquier parte de la aplicación.
<div *ngIf="notProductDetails()" class="col-sm-6 col-md-4 col-lg-3"> <app-sidebar class="app-sidebar"></app-sidebar> </div>HTML ^^^
constructor() {} public notProductDetails(): void { return !window.location.pathname.startsWith('/products/show/'); }TS
Simplemente use la ubicación de la ventana para extraer el nombre de la ruta en lugar de inyectar el enrutador; elimine la inyección del constructor. Además, no es necesario pasar un valor prop allí, porque solo tiene una sola cadena que está afirmando.
De esa manera, está ejecutando ese valor solo una vez. Para lograr esto, puede suscribirse a los eventos del enrutador como este:
public showBar: boolean = true; constructor(private readonly router: Router) { this.router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe(({ urlAfterRedirects }: NavigationEnd) => this.showBar = this.hasRoute(urlAfterRedirects) ); } <div *ngIf="showBar" class="col-sm-6 col-md-4 col-lg-3"> <app-sidebar class="app-sidebar"></app-sidebar> </div> De esta manera, está actualizando el valor de showBar cada vez que finaliza la navegación.
En caso de que alguien pueda encontrarlo útil, aquí están las soluciones finales que he aplicado a este problema:
En app\app.component.ts :
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title: string = 'E-commerce'; constructor(private router: Router) {} ngOnInit() {} routeIncludesNot(route: string) { return !window.location.pathname.startsWith(route); } } En app\app.component.html tengo:
<div class="app-wrapper"> <app-navbar></app-navbar> <div class="container"> <div class="row my-3"> <div *ngIf="routeIncludesNot('/products/show/')" class="col-sm-6 col-md-4 col-lg-3"> <app-sidebar class="app-sidebar"></app-sidebar> </div> <div [ngClass]="routeIncludesNot('/products/show/') ? 'col-sm-6 col-md-8 col-lg-9' : ''"> <router-outlet></router-outlet> </div> </div> </div> <app-footer class="app-footer"></app-footer> </div>Vea una "demostración en vivo" AQUÍ .