如何在与某个模式相对应的所有路线上隐藏一个敏捷组件？

Question

我正在制作一个电子商务应用程序，该应用的前端是在Angular 13中制造的。UI

具有一个侧边栏，我要在产品详细信息页面上显示不是 。

为此，在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 = '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);
  }
}

in 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>

出于某种原因

我无法理解，该解决方案失败，侧边栏在应用程序上的任何地方显示。

我在做什么错？

Answer 1

<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

只需使用窗口位置来拉动路径名而不是注入路由器 - 删除构造函数注入。同样无需在此处传递道具值，因为您只有一个主张的字符串。

Answer 2

这样，您只有一次运行该值。为了实现此目的，您可以订阅这样的路由器事件：

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> 

这样，您每次导航结束时都会更新showbar值。

Answer 3

如果有人发现它有用，这是我应用于此问题的最终解决方案：

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

in app \ app \ app.component.html我有：

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

请参阅“ live demo” 此处 。