Angular2 -outputs

Outputs 实例

需求

• 内层组件的数据传到外层组件
• 外层组件获取数据并DOM变化

outputs: ['hoverImg']

(mouseenter)="imgSelected()

   hoverImg: EventEmitter<string>;
   constructor() {
       this.hoverImg = new EventEmitter();
   }
   imgSelected() {
       this.hoverImg.emit(this.item.owner.avatar_url);
   }
   
   
   
   (hoverImg)="hoverImg($event)"
      hoverImg(url: string) {
       this.selectedAvatar = url;
   }

代码解读

• Component里 加入outputs
• HTML中对相应元素加上出发outputs的事件
• Class中声明outputs的EventEmitter 并出发 emit()
• 外层通过$event接受到参数，并出发方法做其他处理

https://github.com/dreambo8563/node_angular2/blob/ng-pages/app/components/result.ts