Angular14+Bootstrap模态框编辑产品数据异常问题求助

我使用Angular v14和REST API开发项目，导航栏（navbar）组件中嵌入了一个Bootstrap模态框，触发按钮位于导航栏内，模态框主体内容来自post-product组件模板，可通过该组件向REST API提交产品数据。在display-product组件中用表格展示产品列表，点击列表中的编辑按钮时，期望打开导航栏组件中的Bootstrap模态框并显示待编辑的产品数据，但实际仅在全页显示表单控件，模态框未弹出。以下是我的代码，若当前思路无法解决，恳请提供其他解决方案。

display-product组件 #

模板代码 #

<td>
    <a class="a-trash" (click)="editClick(item.id)">
        <i class="fa-solid fa-pen-to-square fa-xl"></i>
    </a>
    <a class="a-trash">
        <i class="fa fa-trash fa-xl"></i>
    </a>
</td>

TypeScript代码 #

editClick(productId: number) {
    console.log("edit");
    this.router.navigate(['/admin/edit', productId]); 
}

post-product组件 #

TypeScript代码 #

@Input() product: Product;
@Input() selectedProduct: Product;

this.route.paramMap.subscribe(params => {
    const productId = +params.get('id')!;
    if (productId) {
        this.getProduct(productId);
    }
});

getProduct(id: number) {
    this.prodService.getProduct(id).subscribe((product: Product) => {
        this.selectedProduct = product;
        this.editProduct();
        // this.editProduct(this.selectedProduct)
    });
}

editProduct() {
    this.productForm.patchValue({
        name: this.selectedProduct.name,
        price: this.selectedProduct.price,
        description: this.selectedProduct.description,
        category: this.selectedProduct.category
    });
}

addProduct() {
    // 此处向REST API提交产品数据
}

模板代码 #

<form [formGroup]="productForm" (ngSubmit)="addProduct()">
    <!-- 此处为表单控件 -->
</form>

navbar组件模板代码 #

<!-- 模态框触发按钮 -->
<li class="nav-item">
   <a class="nav-link text-white" data-toggle="modal" data-target="#modelId" 
      (click) = "addClick()" >
   <i class="fa-solid fa-rectangle-ad fa-2xl"></i> </a>
</li>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="modelId" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Post Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <app-post-product [product]="product" [selectedProduct]="selectedProduct"></app-post-product>
            </div>
        </div>
    </div>
</div>

问题原因及解决方案 #

核心问题 #

当前通过路由跳转/admin/edit/:id的方式，会直接将post-product组件渲染在页面主内容区，而非导航栏的模态框内，这就是表单全页显示、模态框未弹出的根本原因。

方案一：用共享服务控制模态框与数据传递 #

这是跨组件通信最灵活的方案，适合导航栏和列表组件层级分离的场景：

1. 创建产品模态框服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Product } from './product.model';

@Injectable({ providedIn: 'root' })
export class ProductModalService {
  private editProductSubject = new BehaviorSubject<Product | null>(null);
  public editProduct$ = this.editProductSubject.asObservable();

  // 打开模态框并传入待编辑产品
  openEditModal(product: Product): void {
    this.editProductSubject.next(product);
    // 手动触发Bootstrap 5模态框显示
    const modalElement = document.getElementById('modelId');
    if (modalElement) {
      new bootstrap.Modal(modalElement).show();
    }
  }

  // 关闭模态框并重置数据
  closeModal(): void {
    this.editProductSubject.next(null);
    const modalElement = document.getElementById('modelId');
    if (modalElement) {
      new bootstrap.Modal(modalElement).hide();
    }
  }
}

2. 修改display-product组件的编辑逻辑
   移除路由跳转，改为调用服务获取产品并打开模态框：

constructor(private prodService: ProductService, private modalService: ProductModalService) {}

editClick(productId: number){
    this.prodService.getProduct(productId).subscribe(product => {
        this.modalService.openEditModal(product);
    });
}

3. 修改post-product组件的数据来源
   不再依赖路由参数，改为订阅服务的产品数据：

selectedProduct: Product;

constructor(private modalService: ProductModalService) {}

ngOnInit(): void {
    this.modalService.editProduct$.subscribe(product => {
        if (product) {
            this.selectedProduct = product;
            this.editProduct();
        } else {
            // 关闭模态框时重置表单
            this.productForm.reset();
        }
    });
}

4. 修改navbar组件的关闭逻辑
   让模态框关闭按钮调用服务的关闭方法：

<button type="button" class="close" aria-label="Close" (click)="modalService.closeModal()">
    <span aria-hidden="true">&times;</span>
</button>

同时在navbar组件的TS文件中注入ProductModalService。

方案二：移除路由跳转，改用组件间直接通信 #

如果不想用服务，可通过父组件作为中间层传递事件，或用ViewChild获取导航栏模态框实例，但这种方式仅适用于组件层级较浅的场景，灵活性不如服务方案。

注意事项 #

• 确保项目已正确引入Bootstrap 5的JS文件（避免jQuery依赖，更适配Angular）。
• 删除原有的/admin/edit/:id路由配置，避免表单被错误渲染到主内容区。

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