Angular通过Service调用独立组件内Ng-bootstrap Modal失败求助

作为Angular新手，尝试通过Service触发独立组件中的Ng-bootstrap Modal，但点击后仅在页面顶部显示灰色条，Modal未正常弹出。之前有过成功经验，耗时数小时未找到问题，相关代码如下：

TableComponent 代码 #

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { TableServiceService } from '../table-service.service';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { DecimalPipe } from '@angular/common';
import { ModalComponentComponent } from '../modal-component/modal-component.component';

@Component({
  selector: 'app-table-component',
  templateUrl: './table-component.component.html',
  styleUrls: ['./table-component.component.css'],
  providers: [DecimalPipe]
})

export class TableComponentComponent implements OnInit {
  countries:any[] = []
  @ViewChild('modalContent', { static: true }) modalContent!: TemplateRef<any>;
  modalRef?: NgbModalRef;


  constructor(public tableService: TableServiceService,private modalService: NgbModal) { }

  ngOnInit(): void {
    this.countries=this.tableService.countries_service_array
  }
  openModal_Service(countryId:number, country:any):void {
    //this.tableService.modifica(this.modalContent,countryId,true); 
    //const modalRef = this.modalService.open(ModalComponentComponent);
    this.modalRef=this.modalService.open(ModalComponentComponent)
    
  }
 
}

ModalComponent 模板代码 #

<!-- METTERE LA MODALE IN UN COMPONENTE E FARLA APRIRE DA MODIFICA-->
<ng-template #modalContent>
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modifica Paese</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Contenuto della modale -->
        <form>
          <div class="form-group">
            <label for="countryName">Nome Paese</label>
            <input type="text" class="form-control" id="countryName" name="countryName" [(ngModel)]="tableService.country_modificato.name">
          </div>
          <div class="form-group">
            <label for="countryArea">Area</label>
            <input type="text" class="form-control" id="countryArea" name="countryArea" [ngModel]="tableService.country_modificato.area | number" (ngModelChange)="tableService.country_modificato.area = $event" [ngModelOptions]="{updateOn: 'blur'}">
          </div>
          <div class="form-group">
            <label for="countryPopulation">Popolazione</label>
            <input type="text" class="form-control" id="countryPopulation" name="countryPopulation" [ngModel]="tableService.country_modificato.population | number" (ngModelChange)="tableService.country_modificato.population = $event" [ngModelOptions]="{updateOn: 'blur'}">
          </div>
          <div class="form-group">
            <label for="date">Data Censimento</label>
            <input type="text" class="form-control" id="date" name="date" [(ngModel)]="tableService.country_modificato.date">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Salva</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="activeModal.dismiss()">Chiudi</button>
      </div>
    </div>
  </ng-template>

TableServiceService 代码 #

import { Injectable } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class TableServiceService {
  modalRef?: NgbModalRef;
  country_Copia:any ={};
  country_modificato = {
    id: 0,
    name: '',
    area: '',
    population: '',
    date:''
  };

  countries_service_array:any[] = [
    {
      id:0,
      name: 'Russia',
      flag: 'f/f3/Flag_of_Russia.svg',
      area: 17075200,
      population: 146989754,
      date: "vedere come si prende la data"
    },
    {
      id:1,
      name: 'Canada',
      flag: 'c/cf/Flag_of_Canada.svg',
      area: 9976140,
      population: 36624199,
      date: "vedere come si prende la data"
    },
    {
      id:2,
      name: 'United States',
      flag: 'a/a4/Flag_of_the_United_States.svg',
      area: 9629091,
      population: 324459463,
      date: "vedere come si prende la data"
    },
    {
      id:3,
      name: 'China',
      flag: 'f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
      area: 9596960,
      population: 1409517397,
      date: "vedere come si prende la data"
    },
  ];

  constructor(private modalService: NgbModal,private decimalPipe: DecimalPipe,private ngbModal: NgbModal) { }

  modifica(modalContent: any,countryId:number, country:any): void {
    this.modalRef = this.modalService.open(modalContent, { backdrop: 'static' });
    const index = this.countries_service_array.findIndex(country => country.id === countryId);
    if(index!==-1){
      country=this.countries_service_array[index];
      this.country_Copia={...country};
      this.country_modificato=country;
      console.log(this.country_modificato);    
    }
  }
  openModal(component: any): void {
    this.ngbModal.open(component);
  }
  
}

核心问题排查与修复 #

1. ModalComponent 结构错误：用modalService.open(ModalComponentComponent)打开组件时，Ng-bootstrap会直接渲染组件根内容，而当前组件模板把模态框嵌套在<ng-template>里，导致无法识别。

   • 修复：移除ModalComponent中的<ng-template #modalContent>标签，直接保留<div class="modal-content">及其内部内容作为组件根元素。

2. 缺少NgbActiveModal注入：组件模板中使用了activeModal.dismiss()，但组件类未注入NgbActiveModal，会引发报错阻止模态框渲染。

   • 修复：在ModalComponent的ts文件中添加注入：

     import { Component } from '@angular/core';
     import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
     import { TableServiceService } from '../table-service.service';
     
     @Component({
       selector: 'app-modal-component',
       templateUrl: './modal-component.component.html',
       styleUrls: ['./modal-component.component.css']
     })
     export class ModalComponentComponent {
       constructor(public activeModal: NgbActiveModal, public tableService: TableServiceService) {}
     }
     

3. Service冗余依赖：TableServiceService构造函数重复注入NgbModal和ngbModal，保留一个即可。

4. 模态框配置优化：打开模态框时可显式指定大小，避免样式异常：

   this.modalRef = this.modalService.open(ModalComponentComponent, { size: 'lg', backdrop: 'static' });
   

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