如何在对应于特定模式的所有路由上隐藏 Angular 组件？

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

在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

只需使用 window 位置来提取路径名而不是注入路由器 - 删除构造函数注入。也不需要在那里传递一个道具值，因为你只有一个字符串你正在断言。

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

如果有人觉得它有用，这里是我应用到这个问题的最终解决方案：

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

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

查看“现场演示”HERE。

如何在对应于特定模式的所有路由上隐藏 Angular 组件？

How do I hide an Agular component on all routes that correspond to a certain pattern?

javascript

angular

angular13

问题

我做错了什么？