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

@ -15,7 +15,9 @@ export {
PipeMetadata,
LifecycleEvent,
PropertyMetadata,
EventMetadata
EventMetadata,
HostBindingMetadata,
HostListenerMetadata
} from './metadata/directives';
export {ViewMetadata, ViewEncapsulation} from './metadata/view';
@ -33,7 +35,9 @@ import {
PipeMetadata,
LifecycleEvent,
PropertyMetadata,
EventMetadata
EventMetadata,
HostBindingMetadata,
HostListenerMetadata
} from './metadata/directives';
import {ViewMetadata, ViewEncapsulation} from './metadata/view';
@ -447,6 +451,45 @@ export interface EventFactory {
new (bindingPropertyName?: string): any;
}
/**
* {@link HostBindingMetadata} factory for creating decorators.
*
* ## Example as TypeScript Decorator
*
* ```
* @Directive({
* selector: 'sample-dir'
* })
* class SampleDir {
* @HostBinding() prop1; // Same as @HostBinding('prop1') prop1;
* @HostBinding("el-prop") prop1;
* }
* ```
*/
export interface HostBindingFactory {
(hostPropertyName?: string): any;
new (hostPropertyName?: string): any;
}
/**
* {@link HostListenerMetadata} factory for creating decorators.
*
* ## Example as TypeScript Decorator
*
* ```
* @Directive({
* selector: 'sample-dir'
* })
* class SampleDir {
* @HostListener("change", ['$event.target.value']) onChange(value){}
* }
* ```
*/
export interface HostListenerFactory {
(eventName: string, args?: string[]): any;
new (eventName: string, args?: string[]): any;
}
/**
* {@link ComponentMetadata} factory function.
*/
@ -492,4 +535,14 @@ export var Property: PropertyFactory = makePropDecorator(PropertyMetadata);
/**
* {@link EventMetadata} factory function.
*/
export var Event: EventFactory = makePropDecorator(EventMetadata);
export var Event: EventFactory = makePropDecorator(EventMetadata);
/**
* {@link HostBindingMetadata} factory function.
*/
export var HostBinding: HostBindingFactory = makePropDecorator(HostBindingMetadata);
/**
* {@link HostListenerMetadata} factory function.
*/
export var HostListener: HostListenerFactory = makePropDecorator(HostListenerMetadata);