Angular4中购物车为空时如何隐藏Bootstrap模态框

我清楚你的需求：当购物车为空时，点击购物车图标就别弹出那个空的Bootstrap模态框了，只有当购物车里有商品时才打开它。下面是一步步的解决方案：

步骤1：修改购物车图标的触发逻辑 #

首先得把图标上的Bootstrap原生模态框触发属性data-toggle和data-target删掉，因为我们要交给Angular组件来控制模态框的显示，而不是让Bootstrap自动触发。

修改后的图标代码：

<i class="fas fa-cart-plus fa-flip-horizontal text-primary" (click)="get_My_Cart($event)" style="font-size:25px;cursor: pointer;"></i>

步骤2：在组件类中控制模态框的显示 #

接下来要在appComponent.ts里调整get_My_Cart方法，先获取并更新购物车数据，再判断购物车是否有商品，只有当有商品时才手动打开模态框。

这里给你两种实现方式，你可以根据项目情况选：

方式一：用jQuery（如果项目已经引入了jQuery和Bootstrap JS） #

import { Component, OnInit } from '@angular/core';
// 声明jQuery变量，避免类型报错
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mycart: any[] = [];
  my_Cart_Total_Amount: number = 0;

  constructor() { }

  ngOnInit(): void {
    // 这里可以初始化购物车数据，比如从localStorage或后端服务获取
  }

  get_My_Cart(event: Event) {
    // 先执行你的购物车数据获取逻辑，比如从API拉取或者读取本地存储
    // 示例：this.loadCartItems();

    // 确保购物车数据更新后，判断是否有商品
    if (this.mycart.length > 0) {
      // 手动调用Bootstrap的模态框显示方法
      $('#exampleModal').modal('show');
    } else {
      // 可选：给用户一个提示，比如弹窗告知购物车为空
      alert('Your cart is empty!');
    }
  }

  detele_My_Cart(itemCode: string) {
    // 执行删除商品的逻辑，删除后记得更新mycart数组和总金额
    this.mycart = this.mycart.filter(item => item.ITEM_CODE !== itemCode);
    this.calculateTotal();
  }

  calculateTotal() {
    // 计算购物车总金额的逻辑
    this.my_Cart_Total_Amount = this.mycart.reduce((total, item) => total + item.TOTAL_AMT, 0);
  }
}

方式二：用Angular ViewChild（更符合Angular最佳实践，不需要依赖jQuery） #

这种方式不用jQuery，直接通过Angular的视图查询获取模态框元素，再用Bootstrap原生的Modal类控制显示：

首先给模态框加个模板引用变量#cartModal：

<div #cartModal class="modal fade modalstyle" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- 模态框原有内容保持不变 -->
</div>

然后修改组件类：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 通过ViewChild获取模态框元素
  @ViewChild('cartModal') cartModal!: ElementRef;
  mycart: any[] = [];
  my_Cart_Total_Amount: number = 0;

  constructor() { }

  ngOnInit(): void { }

  get_My_Cart(event: Event) {
    // 先更新购物车数据
    // this.loadCartItems();

    if (this.mycart.length > 0) {
      // 创建Bootstrap Modal实例并显示
      const modalInstance = new (window as any).bootstrap.Modal(this.cartModal.nativeElement);
      modalInstance.show();
    } else {
      alert('Your cart is empty!');
    }
  }

  detele_My_Cart(itemCode: string) {
    this.mycart = this.mycart.filter(item => item.ITEM_CODE !== itemCode);
    this.calculateTotal();
  }

  calculateTotal() {
    this.my_Cart_Total_Amount = this.mycart.reduce((total, item) => total + item.TOTAL_AMT, 0);
  }
}

关键原理说明 #

原来的data-toggle="modal"和data-target="#exampleModal"是Bootstrap的原生触发机制，它会直接弹出模态框，完全不管你的购物车状态。把触发逻辑移到Angular组件方法里后，我们就能先判断购物车是否有商品，再决定是否打开模态框，这样就实现了你要的效果。

另外，删除商品后一定要正确更新mycart数组和总金额，确保判断逻辑始终准确。

内容的提问来源于stack exchange，提问作者Nikson