从Angular 2 Typescript的组件中访问HTML内部的变量

Question

我有以下代码来显示ng-bootstrap的模态弹出窗口。在该示例中，有一个按钮，单击该按钮会触发open(content)功能以显示视图。如您所见，HTML模板中定义了#content。但是，这并不是我想要的。我想完全摆脱按钮并以编程方式触发此弹出窗口。因此，我需要以某种方式获取组件中#content的引用。

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</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>One fine body&hellip;</p>
  </div>

  <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('YES')">YES</button>
      <button type="button" class="btn btn-secondary" (click)="c('NO')">NO</button>
  </div>
</template>

<!--I dont want this button to trigger the template in my actual app. So imagine this code is not here!-->
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>  

组件中open(content)的代码：

open(content) {
    this.modalService.open(content).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

例如，我想做类似的事情：

// In this example, content is undefined as I am not and can not pass #content through from the HTML since it is not triggered by a button press like the demo
if (myCustomCondition == true ) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

Answer 1

根据文档，TemplateRef可以传递https://ng-bootstrap.github.io/#/components/modal

因此这应该有用

  @ViewChild('content') content:TemplateRef;

  open() {
    this.modalService.open(this.content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }