Linq to sql 结

　　两者都是属性装饰器。

Host Element

　　从单词上来说 HostListener 与 HostBinding 前面都有 Host。

　　什么是 Host ？

　　Host：主人，东道主

　可以推测这两个单词分别用来监听主人的一举一动，为主人新增一些属性。　

　　Host Element 即宿主元素。

　　宿主元素即可以是普通的标签元素，也可以是自定义的组件。

HostListener

　　为宿主元素添加事件监听。

　　语法知识：

　　　　@HostListener(eventName,args[])

　　　　funcName(arguments) { }

　　eventName :click,mousemove,moueout等事件名。

　　args: 通过触发eventName事件获取的参数，通常是 $event:Event。

　　其中 arguments参数个数与 args 个数应当保持一致。

HostBinding

　　动态设置宿主元素属性值。

　　语法知识：

　　　　@HostBinding(属性值A)

　　　　属性值A更新依据的函数或变量元素

下面是是一个综合例子

import { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular/core';

@Directive({

  selector: '[appCounting]',

  // tslint:disable-next-line:use-host-property-decorator

  host: {

    '(mousemove)': 'selfMove($event.target)'

  }

})

export class CountingDirective {

  constructor(private el: ElementRef, private renderer: Renderer) { }

  clickCounts = 0;

  @HostListener('document:click', ['$event.target'])

  selfClick(element: any) {

    if (this.el.nativeElement.contains(event.target)) {

      console.log('yes');

    } else {

      console.log('no');

    }

}

  // tslint:disable-next-line:member-ordering

  @HostBinding('class.isMove')

  isMove: boolean;

  selfMove(btn: HTMLElement) {

    this.isMove = true;

  }

  @HostListener('mouseout', ['$event.type'])

  selfMouseOut(event, target) {

    console.log(event,target)

    this.isMove = false;

  }

}

　　在组件中，常常会配合使用 ElementRef, Renderer , 获取当前元素，而不必使用 document.querySelector 原生方法获取元素。

巴特西

Linq to sql 结

最新文章

热门文章