极客angular知识分享（4）--模板引用变量

模板引用变量

1. 模板变量的一种形式，可用于引用模板中的元素
2. 定义格式:字符#后跟变量名，如示例定义了变量templateVariable
3. 示例(products见动态属性定义中的示例代码)

 

<div class="bg-info">
    当前商品：{{templateVariable.value || '无商品'}}
  </div>
  
  <table class="table table-bordered">
    <tr>
      <th></th>
      <th>商品名称</th>
      <th>商品描述</th>
    </tr>
    <tr *ngFor="let item of products" [class.bg-info]="getSelected(item)">
      <td (mouseover)="templateVariable.value=item.name">{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
    </tr>
  </table>
  <input #templateVariable type="text" name="mytxt" id="mytxt" (input)="false"/>

※ (input)="false",当用户编辑input元素时，除非上面绑定时间，否则不会进行模板中的数据绑定。

1. 事件过滤

   对于以上代码中个input事件，内容发送变化时都会触发input事件，如果是更新应用状态代价比较昂贵；可以通过特定事件来减少这种代价，如果键盘回车记性确定性更新

   <input #templateVariable type="text" name="mytxt" id="mytxt" (keyup.enter)="false"/>