Angular调用ngx-bootstrap模态框报ts(2345)类型不匹配错误如何解决？

• 直接报错的核心原因是类型不匹配：ModalComponent的openModal方法要求入参是TemplateRef<any>类型的模板引用，你在NavComponent中传入的是字符串'content'，二者类型完全不符，因此触发ts2345错误。
• 额外逻辑错误1：你定义的#content模板引用属于ModalComponent的内部模板内容，NavComponent默认无法跨组件直接访问该引用。
• 额外逻辑错误2：你给ModalComponent同时加了@Component和@Injectable装饰器，并且把组件当成服务注入到NavComponent中，这不符合Angular的依赖注入规范。

下面给出最小改动的可运行方案：

步骤1：修改ModalComponent #

先通过@ViewChild获取自身模板内的content引用，调整打开方法不需要外部传参：

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  // 新增：获取组件内部的content模板引用
  @ViewChild('content') contentTemplate!: TemplateRef<any>;
  modalRef: BsModalRef = new BsModalRef();

  constructor(private modalService: BsModalService) { }

  ngOnInit(): void {
  }

  // 修改：不再要求外部传模板，直接使用内部的contentTemplate
  openModal(){
    this.modalRef = this.modalService.show(this.contentTemplate);
  } 
}

注：删除ModalComponent上的@Injectable装饰器，不需要把组件注册为服务。

步骤2：修改NavComponent模板 #

在nav的模板中引入app-modal组件，并且给它加模板引用，点击按钮时把实例传给open方法：

<!-- 新增模态框组件实例引用 -->
<app-modal #modalInstance></app-modal>

<button *ngIf="!loggedIn" class="btn btn-outline-success ms-3" (click)="open(modalInstance)">
    Sign Up
</button>

步骤3：修改NavComponent逻辑 #

删掉错误的ModalComponent注入，调整open方法逻辑：

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
  // 移除原来的ModalComponent注入
  constructor() { }

  ngOnInit(): void { 
  }

  // 接收模态框实例调用打开方法
  open(modal: ModalComponent) {
    modal.openModal();
  }
}

修改完成后类型错误会消失，点击按钮即可正常打开模态框。

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