极客angular知识分享（3）--事件绑定（附所有支持的事件链接）

事件绑定

用于响应宿主元素的事件发送

 

事件绑定组成部分

1. 宿主元素

绑定的事件源

1. 圆括号

告诉angular是一个事件绑定，且是一个单向绑定---数据从元素流向应用程序其余部分

1. 事件

指定要绑定的事件

1. 表达式

在事件触发时进行求值

※ 支持事件参考

 

动态定义属性

 

<!-- 事件绑定-->
<div class="bg-info">
  选中的商品：{{selectedPro || '无商品'}}
</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)="selectedPro=item.name">{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.description}}</td>
  </tr>
</table>

 

products = [
    {
      id: 1,
      name: "商品1",
      description: "一件不错的1东西"
    },
    {
      id: 2,
      name: "商品2",
      description: "一件不错的2东西"
    },
    {
      id: 3,
      name: "商品3",
      description: "一件不错的3东西"
    },
    {
      id: 4,
      name: "商品4",
      description: "一件不错的4东西"
    },
    {
      id: 5,
      name: "商品5",
      description: "一件不错的5东西"
    },
    {
      id: 6,
      name: "商品6",
      description: "一件不错的6东西"
    },
  ];
}

selectedPro在组件中未定义，而是在事件第一次触发时动态定义了属性

※ 安全的做法是在组件中定义所有的属性，避免造成混乱！

 

事件数据

1. dom事件对象的共有属性

   type: 事件类型，返回一个string值

   target: 这个属性返回触发事件的对象，通常是dom中html元素的对象

   timeStamp: 返回一个包含事件触发事件的number值，使用来自1970年1月1日以来的毫秒数

2. 示例代码

 

<div class="bg-info">
    录入的商品：{{inputPro || '无商品'}}
</div>
    <input type="text" name="mytxt" id="mytxt" (input)="inputPro=$event.target.value"/>

 

inputPro:string;