Angular 项目中未显示 NgModal

Question

我正在尝试在单击按钮时显示模式。模态框在专用组件中。

模态框位于名为 NgbdModalContent 的组件内，模态框通过另一个组件内的方法在单击按钮时激活。

这是 NgbdModalContent：

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" 
 (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>"Some text"</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-dark" 
  (click)="activeModal.close('Close click')">Close</button>
      </div>
   `
 })
 export class NgbdModalContent {

   constructor(public activeModal: NgbActiveModal) {}
 }

这是另一个组件内部的方法：

    async onCreateClicked() {
   var  modalService=new NgbModal;
     const modalRef = modalService.open(NgbdModalContent);
    return;
   }

现在，这不会编译，因为新的 NgbModal 需要一些参数，我不知道要放什么，我不能把 NgbModal 作为这个组件的构造函数参数，因为它已经有另一个构造函数。

Answer 1

您已添加如下代码

constructor(public activeModal: NgbActiveModal) {}

当你创建这样的对象时

var  modalService=new NgbModal;

-- 然后它总是要求传递参数。所以如果上面的参数没有使用 - 删除它。而不是使用 new 创建对象，而是使用构造函数。

Angular 项目中未显示 NgModal

NgModal does not display in Angular project

ng-bootstrap

angular