在Angular模板中使用此参考

Question

在我们的组件HTML中，我们有一个带引用名称的模态。在这个模态中，我们有按钮来关闭模态。

这是代码：

<div bsModal #confirmModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm modal" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Confirm</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="confirmModal.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
        <span>Are you sure ?</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="confirmModal.hide()">Cancel</button>
        <button type="button" class="btn btn-danger" (click)="confirmModal.hide()">Refresh Data</button>
      </div>
    </div>
  </div>
</div>

为了关闭它，我们目前称为(click)="confirmModal.hide()"。使用引用名称。

由于我们在参考#confirmModal的div内，是否有可能使用(click)="this.hide()"调用hide函数

当然我尝试了这种语法，它没有按预期工作，因为this指的是我理解的组件。

作为奖励：你有什么想法我可以在哪里找到关于这个参考语法#reference的Angular doc的信息来命名我的html的一部分？我使用它而不完全了解它的所有可能性。

Answer 1

#abc被称为template reference variable。你可以在这里找到更多相关信息：https://angular.io/guide/template-syntax#ref-vars