在Angular模板中使用此参考

时间:2017-04-26 17:39:17

标签: angular

在我们的组件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()" 调用隐藏功能

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

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

1 个答案:

答案 0 :(得分:2)

#abc称为class ProductsController < ApplicationController def index @products = Product.order(:name) respond_to do |format| format.html format.csv { send_data @products.to_csv } format.xls { send_data @products.to_xls } end end end 。您可以在此处找到有关此内容的更多信息:https://angular.io/guide/template-syntax#ref-vars