在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指的是組件，因此無法正常工作。

另外一個好處是：您是否知道我可以在Angular doc上找到有關此參考語法#reference以命名html的一部分？ 我在不完全了解其所有可能性的情況下使用它。

Answer 1

#abc稱為template reference variable 。 您可以在這里找到有關它的更多信息： https : //angular.io/guide/template-syntax#ref-vars