feat(core): add support for @HostBinding and @HostListener

Example:

@Directive({selector: 'my-directive'})
class MyDirective {
  @HostBinding("attr.my-attr") myAttr: string;
  @HostListener("click", ["$event.target"])
  onClick(target) {
    this.target = target;
  }
}

Closes #3996
This commit is contained in:
vsavkin
2015-09-04 14:07:16 -07:00
committed by Victor Savkin
parent 855cb16cc7
commit df8e15cab7
7 changed files with 264 additions and 30 deletions

View File

@ -1109,4 +1109,68 @@ export class PropertyMetadata {
@CONST()
export class EventMetadata {
constructor(public bindingPropertyName?: string) {}
}
/**
* Declare a host property binding.
*
* ## Example
*
* ```
* @Directive({
* selector: 'sample-dir'
* })
* class SampleDir {
* @HostBinding() prop1; // Same as @HostBinding('prop1') prop1;
* @HostBinding("el-prop") prop2;
* }
* ```
*
* This is equivalent to
*
* ```
* @Directive({
* selector: 'sample-dir',
* host: {'[prop1]': 'prop1', '[el-prop]': 'prop2'}
* })
* class SampleDir {
* prop1;
* prop2;
* }
* ```
*/
@CONST()
export class HostBindingMetadata {
constructor(public hostPropertyName?: string) {}
}
/**
* Declare a host listener.
*
* ## Example
*
* ```
* @Directive({
* selector: 'sample-dir'
* })
* class SampleDir {
* @HostListener("change", ['$event.target.value']) onChange(value){}
* }
* ```
*
* This is equivalent to
*
* ```
* @Directive({
* selector: 'sample-dir',
* host: {'(change)': 'onChange($event.target.value)'}
* })
* class SampleDir {
* onChange(value){}
* }
* ```
*/
@CONST()
export class HostListenerMetadata {
constructor(public eventName: string, public args?: string[]) {}
}