ngx-bootstrap ERROR TypeError: _co.openModal is not a function

Question

我是 ngx-bootstrap 的新手，我尝试从这个网站制作模态：https://valor-software.com/ngx-bootstrap/#/modals

我收到这个错误：

ERROR TypeError: _co.openModal is not a function

这里有一些片段

//app.component.ts file

import { Component } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';


 @Component({
  selector: 'app-root',
  styleUrls:['app.component.css'],
  templateUrl:'app.component.html',
  //template:`<h1>Hello world</h1>`
})

export class AppComponent 
{
  title = 'ini tengah';
}

export class DemoModalServiceStaticComponent {
  public modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

<!--the HTML file-->

<!--call modal-->
<li><a href="#" (click)="openModal(template)">BUTTON</a></li>
<!--end-->

<!--Modal-->
<template #template>
    <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      This is a modal.
    </div>
  </template>
<!--enf of modal-->

我关注了该网站并收到了错误消息。谁能帮我解决这个错误？

如果需要更多片段，请告诉我。

Answer 1

这样试试：

在App组件里面写openModal方法

export class AppComponent {
  title = 'ini tengah';
  public modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}