ng-bootstrap modal 的 ElementRef

Question

我想从 Angular 2 的组件中引用 ng-bootstrap 模态内部的 html 元素

<ng-template #liveView id="liveView" let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Live View</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">
    <canvas #liveViewCanvas style="border: 1px solid black;" width="270" height="480"></canvas>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger btn-xs" (click)="closeLiveViewModal()">
      <span class="fa fa-trash"></span> Close
    </button>
  </div>
</ng-template>

如何在 Angular 2 组件中引用 #liveViewCanvas？通过@viewchild 引用时，我收到“ERROR TypeError: Cannot read property 'nativeElement' of undefined”

Answer 1

也许是这样的。

const modalRef = this.modalService.open(HoldingModalsProductCreateComponent,{backdrop: 'static'});
modalRef._windowCmptRef.hostView.rootNodes[0];

Answer 2

和 NgIf 指令一样，你只能在 DOM 中使用引用。如果你想操作模板，只需用模态的模板和逻辑创建一个组件，然后启动它。

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}