不带按钮而是通过函数调用触发NgbModal

Question

Angular Bootstrap模态中的所有示例都有一个外部按钮来触发模态本身。

就我而言，我使用的是具有功能的图表nodeClicked(event, node)。

在该功能中，我检查用户CTRL在单击节点时是否按下了按钮。如果没有，我需要触发一个Modal，说明未单击该按钮。

component.html

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Warning</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>NO <kbd>CTRL</kbd> Button Pressed.</p>
        <p>If previous Selection were selected using Multiselect Feature, they will be deleted.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    </div>
</ng-template>

within the nodeClicked() function:

component.ts

constructor (modal: NgbModal) {}
....
nodeClicked(ev, node) {

if (ev.control) {
  //perform necessary stuff
}
else {
  this.modal.open() // here according to API I need to pass content.
  // but I already have mentioned that in `modal-body`
}

}

How Can i Trigger my Modal without actually passing the content string in the this.model.open() method call?

Answer 1

您可以@ViewChild("content")在组件代码中获得对模态模板的引用，并将其传递给NgbModal.open。例如，此打孔器会在5秒钟后自动显示模式。

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class MyComponent {

  @ViewChild("content") modalContent: TemplateRef<any>;

  constructor(private modal: NgbModal) {
  }

  nodeClicked(ev, node) {
    if (ev.control) {
      //perform necessary stuff
    }
    else {
      this.modal.open(this.modalContent).result.then((result) => {
        ...
      });
    }
  }
}