Bootstrap 模态弹出组件在单击角度形式元素时不起作用

Question

我有一个要求，其中我使用角度形式的多选，每行也有徽标。单击此徽标时，我想加载模态弹出组件，我正在遵循 Stackblitz 演示，以便在单击元素时调用 app.component 中的模态组件。我关注的演示链接： Bootstrap modal Stackblitz Demo我正在实施的解决方法演示如下：解决方法演示 Stackblitz我使用openModal()函数单击徽标时遇到的错误是未定义的对象。在正式使用角度时如何纠正这个问题？以下是代码片段：多选形式组件@Component({selector: 'formly-field-multiselect',template: `<br><p-multiSelect  [options]="to.options"  [formControl]="formControl"  [formlyAttributes]="field"  [showClear]="!to.required" >  <ng-template let-item pTemplate="item">  <div>{{item.label}}</div>   <div>   <i class="pi pi-check" (click)="to.openModal()"></i>   </div>  </ng-template></p-multiSelect>`,})app.component.ts，其中调用模态组件（calenderComponent）fields: FormlyFieldConfig[] = [{  key: "select",  type: "multiselect",  templateOptions: {    multiple: false,    placeholder: "Select Option",    options: [      { label: "Select City", value: null },      { label: "New York", value: { id: 1, name: "New York", code: "NY" } },      { label: "Rome", value: { id: 2, name: "Rome", code: "RM" } },      { label: "London", value: { id: 3, name: "London", code: "LDN" } },      {        label: "Istanbul",        value: { id: 4, name: "Istanbul", code: "IST" }      },      { label: "Paris", value: { id: 5, name: "Paris", code: "PRS" } }    ],      openModal() {         this.modalRef = this.modalService.show(CalenderComponent,  {         initialState: {         title: 'Modal title'       }  }); },  }}

Answer 1

如果您对此进行调试，您可以看到在函数 ( )this的上下文中，是您在对象中定义的，该对象没有您注入到组件中的服务，为了克服这个问题，您可以使用 lambda 表达式：openModalfieldfieldsmodalService

  openModal: () => {

    this.modalRef = this.modalService.show(CalenderComponent, {

      initialState: {

        title: "Modal title"

      }

    });

  }

这可以使关闭保持如您所愿

解决了这个问题之后，你又会面临另一个问题：

为了克服这个问题，您需要CalenderComponent在应用程序模块文件 ( app.module.ts) 中添加作为入口组件：

entryComponents: [CalenderComponent]

这是一个分叉的工作stackblitz