Question

我想引用角度为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引用“错误类型错误：无法读取未定义的属性'nativeElement'”

Answer 1

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

// Join aliases for ease of getting access to all parts of the query
VisitorVisit visitorVisitAlias = null;
Visit visitAlias = null;
VisitorLayEntryPoints = visitorLayEntryPointsAlias = null;

IList<int> locationIds =
  session.QueryOver<VisitorVisit>()
    .JoinAlias(() => visitorVisitAlias.VisitId, () => visitAlias)
    .JoinAlias(() => visitAlias.VepId, () => visitorLayEntryPointsAlias)

    // Depends on where your LocId is
    .Select(() => visitorVisit.LocId)

    // I assumed your LocId is an int, switch to string if it's a string
    .List<int>();

Answer 2

也许是这个。

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

ng-bootstrap模态的ElementRef

2 个答案: