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:
@ -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);
|
Reference in New Issue
Block a user