feat(core): renames Property into Input and Event into Output
BREACKING CHANGE: Before: @Directive({properties: ['one'], events: ['two']}) After: @Directive({inputs: ['one'], outputs: ['two']}) Before: @Component({properties: ['one'], events: ['two']}) After: @Componet({inputs: ['one'], outputs: ['two']}) Before: class A {@Property() one; @Event() two;} After: class A {@Input() one; @Output() two;}
This commit is contained in:
@ -157,7 +157,7 @@ export class ChangeDetectorRef {
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* @Component({selector: 'live-data', properties: ['live']})
|
||||
* @Component({selector: 'live-data', inputs: ['live']})
|
||||
* @View({
|
||||
* template: `Data: {{dataProvider.data}}`
|
||||
* })
|
||||
|
@ -21,7 +21,7 @@ import {BaseException, WrappedException} from "angular2/src/core/facade/exceptio
|
||||
* parentProp = "init";
|
||||
* }
|
||||
*
|
||||
* @Directive({selector: 'child', properties: ['prop']})
|
||||
* @Directive({selector: 'child', inputs: ['prop']})
|
||||
* class Child {
|
||||
* constructor(public parent: Parent) {}
|
||||
*
|
||||
@ -49,7 +49,7 @@ export class ExpressionChangedAfterItHasBeenCheckedException extends BaseExcepti
|
||||
* ### Example ([live demo](http://plnkr.co/edit/2Kywoz?p=preview))
|
||||
*
|
||||
* ```typescript
|
||||
* @Directive({selector: 'child', properties: ['prop']})
|
||||
* @Directive({selector: 'child', inputs: ['prop']})
|
||||
* class Child {
|
||||
* prop;
|
||||
* }
|
||||
|
@ -5,8 +5,8 @@ import {ListWrapper, StringMap, StringMapWrapper} from 'angular2/src/core/facade
|
||||
import {
|
||||
DirectiveMetadata,
|
||||
ComponentMetadata,
|
||||
PropertyMetadata,
|
||||
EventMetadata,
|
||||
InputMetadata,
|
||||
OutputMetadata,
|
||||
HostBindingMetadata,
|
||||
HostListenerMetadata,
|
||||
ContentChildrenMetadata,
|
||||
@ -45,26 +45,26 @@ export class DirectiveResolver {
|
||||
private _mergeWithPropertyMetadata(dm: DirectiveMetadata,
|
||||
propertyMetadata:
|
||||
StringMap<string, any[]>): DirectiveMetadata {
|
||||
var properties = [];
|
||||
var events = [];
|
||||
var inputs = [];
|
||||
var outputs = [];
|
||||
var host = {};
|
||||
var queries = {};
|
||||
|
||||
StringMapWrapper.forEach(propertyMetadata, (metadata: any[], propName: string) => {
|
||||
metadata.forEach(a => {
|
||||
if (a instanceof PropertyMetadata) {
|
||||
if (a instanceof InputMetadata) {
|
||||
if (isPresent(a.bindingPropertyName)) {
|
||||
properties.push(`${propName}: ${a.bindingPropertyName}`);
|
||||
inputs.push(`${propName}: ${a.bindingPropertyName}`);
|
||||
} else {
|
||||
properties.push(propName);
|
||||
inputs.push(propName);
|
||||
}
|
||||
}
|
||||
|
||||
if (a instanceof EventMetadata) {
|
||||
if (a instanceof OutputMetadata) {
|
||||
if (isPresent(a.bindingPropertyName)) {
|
||||
events.push(`${propName}: ${a.bindingPropertyName}`);
|
||||
outputs.push(`${propName}: ${a.bindingPropertyName}`);
|
||||
} else {
|
||||
events.push(propName);
|
||||
outputs.push(propName);
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,15 +98,14 @@ export class DirectiveResolver {
|
||||
}
|
||||
});
|
||||
});
|
||||
return this._merge(dm, properties, events, host, queries);
|
||||
return this._merge(dm, inputs, outputs, host, queries);
|
||||
}
|
||||
|
||||
private _merge(dm: DirectiveMetadata, properties: string[], events: string[],
|
||||
private _merge(dm: DirectiveMetadata, inputs: string[], outputs: string[],
|
||||
host: StringMap<string, string>,
|
||||
queries: StringMap<string, any>): DirectiveMetadata {
|
||||
var mergedProperties =
|
||||
isPresent(dm.properties) ? ListWrapper.concat(dm.properties, properties) : properties;
|
||||
var mergedEvents = isPresent(dm.events) ? ListWrapper.concat(dm.events, events) : events;
|
||||
var mergedInputs = isPresent(dm.inputs) ? ListWrapper.concat(dm.inputs, inputs) : inputs;
|
||||
var mergedOutputs = isPresent(dm.outputs) ? ListWrapper.concat(dm.outputs, outputs) : outputs;
|
||||
var mergedHost = isPresent(dm.host) ? StringMapWrapper.merge(dm.host, host) : host;
|
||||
var mergedQueries =
|
||||
isPresent(dm.queries) ? StringMapWrapper.merge(dm.queries, queries) : queries;
|
||||
@ -114,8 +113,8 @@ export class DirectiveResolver {
|
||||
if (dm instanceof ComponentMetadata) {
|
||||
return new ComponentMetadata({
|
||||
selector: dm.selector,
|
||||
properties: mergedProperties,
|
||||
events: mergedEvents,
|
||||
inputs: mergedInputs,
|
||||
outputs: mergedOutputs,
|
||||
host: mergedHost,
|
||||
bindings: dm.bindings,
|
||||
exportAs: dm.exportAs,
|
||||
@ -129,8 +128,8 @@ export class DirectiveResolver {
|
||||
} else {
|
||||
return new DirectiveMetadata({
|
||||
selector: dm.selector,
|
||||
properties: mergedProperties,
|
||||
events: mergedEvents,
|
||||
inputs: mergedInputs,
|
||||
outputs: mergedOutputs,
|
||||
host: mergedHost,
|
||||
bindings: dm.bindings,
|
||||
exportAs: dm.exportAs,
|
||||
|
@ -151,7 +151,8 @@ export class DirectiveBinding extends ResolvedBinding {
|
||||
}
|
||||
|
||||
get eventEmitters(): string[] {
|
||||
return isPresent(this.metadata) && isPresent(this.metadata.events) ? this.metadata.events : [];
|
||||
return isPresent(this.metadata) && isPresent(this.metadata.outputs) ? this.metadata.outputs :
|
||||
[];
|
||||
}
|
||||
|
||||
static createFromBinding(binding: Binding, meta: DirectiveMetadata): DirectiveBinding {
|
||||
@ -170,9 +171,9 @@ export class DirectiveBinding extends ResolvedBinding {
|
||||
RenderDirectiveMetadata.DIRECTIVE_TYPE,
|
||||
selector: meta.selector,
|
||||
compileChildren: meta.compileChildren,
|
||||
events: meta.events,
|
||||
outputs: meta.outputs,
|
||||
host: isPresent(meta.host) ? MapWrapper.createFromStringMap(meta.host) : null,
|
||||
properties: meta.properties,
|
||||
inputs: meta.inputs,
|
||||
readAttributes: DirectiveBinding._readAttributes(<any>deps),
|
||||
queries: meta.queries,
|
||||
|
||||
|
@ -50,7 +50,7 @@ export var LIFECYCLE_HOOKS_VALUES = [
|
||||
* propB;
|
||||
*
|
||||
* onChanges(changes: {[idx: string, PropertyUpdate]}): void {
|
||||
* // This will get called after any of the properties have been updated.
|
||||
* // This will get called after any of the inputs have been updated.
|
||||
* if (changes['propA']) {
|
||||
* // if propA was updated
|
||||
* }
|
||||
|
@ -35,7 +35,7 @@ import {
|
||||
* </div>
|
||||
* ```
|
||||
*/
|
||||
@Directive({selector: '[ng-class]', properties: ['rawClass: ng-class', 'initialClasses: class']})
|
||||
@Directive({selector: '[ng-class]', inputs: ['rawClass: ng-class', 'initialClasses: class']})
|
||||
export class NgClass implements DoCheck, OnDestroy {
|
||||
private _differ: any;
|
||||
private _mode: string;
|
||||
|
@ -39,7 +39,7 @@ import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
|
||||
* - `<li template="ng-for #item of items; #i = index">...</li>`
|
||||
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
|
||||
*/
|
||||
@Directive({selector: '[ng-for][ng-for-of]', properties: ['ngForOf']})
|
||||
@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf']})
|
||||
export class NgFor implements DoCheck {
|
||||
_ngForOf: any;
|
||||
private _differ: IterableDiffer;
|
||||
|
@ -24,7 +24,7 @@ import {isBlank} from 'angular2/src/core/facade/lang';
|
||||
* - `<div template="ng-if condition">...</div>`
|
||||
* - `<template [ng-if]="condition"><div>...</div></template>`
|
||||
*/
|
||||
@Directive({selector: '[ng-if]', properties: ['ngIf']})
|
||||
@Directive({selector: '[ng-if]', inputs: ['ngIf']})
|
||||
export class NgIf {
|
||||
private _prevCondition: boolean = null;
|
||||
|
||||
|
@ -29,7 +29,7 @@ import {isPresent, isBlank, print} from 'angular2/src/core/facade/lang';
|
||||
* - `<div [ng-style]="{'text-align': alignExp}"></div>`
|
||||
* - `<div [ng-style]="styleExp"></div>`
|
||||
*/
|
||||
@Directive({selector: '[ng-style]', properties: ['rawStyle: ng-style']})
|
||||
@Directive({selector: '[ng-style]', inputs: ['rawStyle: ng-style']})
|
||||
export class NgStyle implements DoCheck {
|
||||
_rawStyle;
|
||||
_differ: KeyValueDiffer;
|
||||
|
@ -39,7 +39,7 @@ export class SwitchView {
|
||||
* </ANY>
|
||||
* ```
|
||||
*/
|
||||
@Directive({selector: '[ng-switch]', properties: ['ngSwitch']})
|
||||
@Directive({selector: '[ng-switch]', inputs: ['ngSwitch']})
|
||||
export class NgSwitch {
|
||||
private _switchValue: any;
|
||||
private _useDefault: boolean = false;
|
||||
@ -139,7 +139,7 @@ export class NgSwitch {
|
||||
* <template ng-switch-when="stringValue">...</template>
|
||||
* ```
|
||||
*/
|
||||
@Directive({selector: '[ng-switch-when]', properties: ['ngSwitchWhen']})
|
||||
@Directive({selector: '[ng-switch-when]', inputs: ['ngSwitchWhen']})
|
||||
export class NgSwitchWhen {
|
||||
// `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
|
||||
_value: any = _WHEN_DEFAULT;
|
||||
|
@ -91,7 +91,7 @@ export class Observable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Use by directives and components to emit custom {@link Event}s.
|
||||
* Use by directives and components to emit custom Events.
|
||||
*
|
||||
* ## Examples
|
||||
*
|
||||
@ -109,8 +109,8 @@ export class Observable {
|
||||
* </div>`})
|
||||
* export class Zippy {
|
||||
* visible: boolean = true;
|
||||
* @Event() open: EventEmitter = new EventEmitter();
|
||||
* @Event() close: EventEmitter = new EventEmitter();
|
||||
* @Output() open: EventEmitter = new EventEmitter();
|
||||
* @Output() close: EventEmitter = new EventEmitter();
|
||||
*
|
||||
* toggle() {
|
||||
* this.visible = !this.visible;
|
||||
|
@ -53,7 +53,7 @@ const controlGroupBinding =
|
||||
@Directive({
|
||||
selector: '[ng-control-group]',
|
||||
bindings: [controlGroupBinding],
|
||||
properties: ['name: ng-control-group'],
|
||||
inputs: ['name: ng-control-group'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgControlGroup extends ControlContainer implements OnInit,
|
||||
|
@ -75,8 +75,8 @@ const controlNameBinding =
|
||||
@Directive({
|
||||
selector: '[ng-control]',
|
||||
bindings: [controlNameBinding],
|
||||
properties: ['name: ngControl', 'model: ngModel'],
|
||||
events: ['update: ngModel'],
|
||||
inputs: ['name: ngControl', 'model: ngModel'],
|
||||
outputs: ['update: ngModel'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgControlName extends NgControl implements OnChanges,
|
||||
|
@ -85,7 +85,7 @@ const formDirectiveBinding =
|
||||
host: {
|
||||
'(submit)': 'onSubmit()',
|
||||
},
|
||||
events: ['ngSubmit'],
|
||||
outputs: ['ngSubmit'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgForm extends ControlContainer implements Form {
|
||||
|
@ -65,8 +65,8 @@ const formControlBinding =
|
||||
@Directive({
|
||||
selector: '[ng-form-control]',
|
||||
bindings: [formControlBinding],
|
||||
properties: ['form: ngFormControl', 'model: ngModel'],
|
||||
events: ['update: ngModel'],
|
||||
inputs: ['form: ngFormControl', 'model: ngModel'],
|
||||
outputs: ['update: ngModel'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgFormControl extends NgControl implements OnChanges {
|
||||
|
@ -92,9 +92,9 @@ const formDirectiveBinding =
|
||||
@Directive({
|
||||
selector: '[ng-form-model]',
|
||||
bindings: [formDirectiveBinding],
|
||||
properties: ['form: ng-form-model'],
|
||||
inputs: ['form: ng-form-model'],
|
||||
host: {'(submit)': 'onSubmit()'},
|
||||
events: ['ngSubmit'],
|
||||
outputs: ['ngSubmit'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgFormModel extends ControlContainer implements Form,
|
||||
|
@ -36,8 +36,8 @@ const formControlBinding = CONST_EXPR(new Binding(NgControl, {toAlias: forwardRe
|
||||
@Directive({
|
||||
selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
|
||||
bindings: [formControlBinding],
|
||||
properties: ['model: ngModel'],
|
||||
events: ['update: ngModel'],
|
||||
inputs: ['model: ngModel'],
|
||||
outputs: ['update: ngModel'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgModel extends NgControl implements OnChanges {
|
||||
|
@ -14,15 +14,15 @@ export './metadata/view.dart';
|
||||
* See: [DirectiveMetadata] for docs.
|
||||
*/
|
||||
class Directive extends DirectiveMetadata {
|
||||
const Directive({String selector, List<String> properties,
|
||||
List<String> events, Map<String, String> host,
|
||||
const Directive({String selector, List<String> inputs,
|
||||
List<String> outputs, Map<String, String> host,
|
||||
List bindings, String exportAs, String moduleId,
|
||||
Map<String, dynamic> queries,
|
||||
bool compileChildren: true})
|
||||
: super(
|
||||
selector: selector,
|
||||
properties: properties,
|
||||
events: events,
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
host: host,
|
||||
bindings: bindings,
|
||||
exportAs: exportAs,
|
||||
@ -35,15 +35,15 @@ class Directive extends DirectiveMetadata {
|
||||
* See: [ComponentMetadata] for docs.
|
||||
*/
|
||||
class Component extends ComponentMetadata {
|
||||
const Component({String selector, List<String> properties,
|
||||
List<String> events, Map<String, String> host,
|
||||
const Component({String selector, List<String> inputs,
|
||||
List<String> outputs, Map<String, String> host,
|
||||
List bindings, String exportAs, String moduleId,
|
||||
Map<String, dynamic> queries,
|
||||
bool compileChildren, List viewBindings, ChangeDetectionStrategy changeDetection})
|
||||
: super(
|
||||
selector: selector,
|
||||
properties: properties,
|
||||
events: events,
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
host: host,
|
||||
bindings: bindings,
|
||||
exportAs: exportAs,
|
||||
@ -134,18 +134,18 @@ class ViewChild extends ViewChildMetadata {
|
||||
}
|
||||
|
||||
/**
|
||||
* See: [PropertyMetadata] for docs.
|
||||
* See: [InputMetadata] for docs.
|
||||
*/
|
||||
class Property extends PropertyMetadata {
|
||||
const Property([String bindingPropertyName])
|
||||
class Input extends InputMetadata {
|
||||
const Input([String bindingPropertyName])
|
||||
: super(bindingPropertyName);
|
||||
}
|
||||
|
||||
/**
|
||||
* See: [EventMetadata] for docs.
|
||||
* See: [OutputMetadata] for docs.
|
||||
*/
|
||||
class Event extends EventMetadata {
|
||||
const Event([String bindingPropertyName])
|
||||
class Output extends OutputMetadata {
|
||||
const Output([String bindingPropertyName])
|
||||
: super(bindingPropertyName);
|
||||
}
|
||||
|
||||
|
@ -17,8 +17,8 @@ export {
|
||||
ComponentMetadata,
|
||||
DirectiveMetadata,
|
||||
PipeMetadata,
|
||||
PropertyMetadata,
|
||||
EventMetadata,
|
||||
InputMetadata,
|
||||
OutputMetadata,
|
||||
HostBindingMetadata,
|
||||
HostListenerMetadata
|
||||
} from './metadata/directives';
|
||||
@ -39,8 +39,8 @@ import {
|
||||
ComponentMetadata,
|
||||
DirectiveMetadata,
|
||||
PipeMetadata,
|
||||
PropertyMetadata,
|
||||
EventMetadata,
|
||||
InputMetadata,
|
||||
OutputMetadata,
|
||||
HostBindingMetadata,
|
||||
HostListenerMetadata
|
||||
} from './metadata/directives';
|
||||
@ -147,8 +147,8 @@ export interface ViewDecorator extends TypeDecorator {
|
||||
export interface DirectiveFactory {
|
||||
(obj: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -158,8 +158,8 @@ export interface DirectiveFactory {
|
||||
}): DirectiveDecorator;
|
||||
new (obj: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -215,8 +215,8 @@ export interface DirectiveFactory {
|
||||
export interface ComponentFactory {
|
||||
(obj: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -228,8 +228,8 @@ export interface ComponentFactory {
|
||||
}): ComponentDecorator;
|
||||
new (obj: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -452,21 +452,21 @@ export interface PipeFactory {
|
||||
}
|
||||
|
||||
/**
|
||||
* {@link PropertyMetadata} factory for creating decorators.
|
||||
* {@link InputMetadata} factory for creating decorators.
|
||||
*
|
||||
* See {@link PropertyMetadata}.
|
||||
* See {@link InputMetadata}.
|
||||
*/
|
||||
export interface PropertyFactory {
|
||||
export interface InputFactory {
|
||||
(bindingPropertyName?: string): any;
|
||||
new (bindingPropertyName?: string): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@link EventMetadata} factory for creating decorators.
|
||||
* {@link OutputMetadata} factory for creating decorators.
|
||||
*
|
||||
* See {@link EventMetadata}.
|
||||
* See {@link OutputMetadata}.
|
||||
*/
|
||||
export interface EventFactory {
|
||||
export interface OutputFactory {
|
||||
(bindingPropertyName?: string): any;
|
||||
new (bindingPropertyName?: string): any;
|
||||
}
|
||||
@ -567,18 +567,18 @@ export var ViewQuery: QueryFactory = makeParamDecorator(ViewQueryMetadata);
|
||||
export var Pipe: PipeFactory = <PipeFactory>makeDecorator(PipeMetadata);
|
||||
|
||||
/**
|
||||
* {@link PropertyMetadata} factory function.
|
||||
* {@link InputMetadata} factory function.
|
||||
*
|
||||
* See {@link PropertyMetadata}.
|
||||
* See {@link InputMetadata}.
|
||||
*/
|
||||
export var Property: PropertyFactory = makePropDecorator(PropertyMetadata);
|
||||
export var Input: InputFactory = makePropDecorator(InputMetadata);
|
||||
|
||||
/**
|
||||
* {@link EventMetadata} factory function.
|
||||
* {@link OutputMetadata} factory function.
|
||||
*
|
||||
* See {@link EventMetadata}.
|
||||
* See {@link OutputMetadatas}.
|
||||
*/
|
||||
export var Event: EventFactory = makePropDecorator(EventMetadata);
|
||||
export var Output: OutputFactory = makePropDecorator(OutputMetadata);
|
||||
|
||||
/**
|
||||
* {@link HostBindingMetadata} factory function.
|
||||
|
@ -71,7 +71,7 @@ export class AttributeMetadata extends DependencyMetadata {
|
||||
* ```javascript
|
||||
* @Component({
|
||||
* selector: 'pane',
|
||||
* properties: ['title']
|
||||
* inputs: ['title']
|
||||
* })
|
||||
* @View(...)
|
||||
* class Pane {
|
||||
|
@ -96,7 +96,7 @@ import {ChangeDetectionStrategy} from 'angular2/src/core/change_detection';
|
||||
*
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: [
|
||||
* inputs: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
@ -242,7 +242,7 @@ import {ChangeDetectionStrategy} from 'angular2/src/core/change_detection';
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[tooltip]',
|
||||
* properties: [
|
||||
* inputs: [
|
||||
* 'text: tooltip'
|
||||
* ],
|
||||
* host: {
|
||||
@ -332,7 +332,7 @@ import {ChangeDetectionStrategy} from 'angular2/src/core/change_detection';
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[unless]',
|
||||
* properties: ['unless']
|
||||
* inputs: ['unless']
|
||||
* })
|
||||
* export class Unless {
|
||||
* viewContainer: ViewContainerRef;
|
||||
@ -417,11 +417,11 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
selector: string;
|
||||
|
||||
/**
|
||||
* Enumerates the set of data-bound properties for a directive
|
||||
* Enumerates the set of data-bound input properties for a directive
|
||||
*
|
||||
* Angular automatically updates data-bound properties during change detection.
|
||||
* Angular automatically updates input properties during change detection.
|
||||
*
|
||||
* The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
* The `inputs` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
* configuration:
|
||||
*
|
||||
* - `directiveProperty` specifies the component property where the value is written.
|
||||
@ -436,7 +436,7 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
* ```typescript
|
||||
* @Component({
|
||||
* selector: 'bank-account',
|
||||
* properties: ['bankName', 'id: account-id']
|
||||
* inputs: ['bankName', 'id: account-id']
|
||||
* })
|
||||
* @View({
|
||||
* template: `
|
||||
@ -465,15 +465,15 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
properties: string[];
|
||||
inputs: string[];
|
||||
|
||||
/**
|
||||
* Enumerates the set of event-bound properties.
|
||||
* Enumerates the set of event-bound output properties.
|
||||
*
|
||||
* When an event-bound property emits an event, an event handler attached to that event
|
||||
* When an output property emits an event, an event handler attached to that event
|
||||
* the template is invoked.
|
||||
*
|
||||
* The `events` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
* The `outputs` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
* configuration:
|
||||
*
|
||||
* - `directiveProperty` specifies the component property that emits events.
|
||||
@ -484,7 +484,7 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
* ```typescript
|
||||
* @Directive({
|
||||
* selector: 'interval-dir',
|
||||
* events: ['everySecond', 'five5Secs: everyFiveSeconds']
|
||||
* outputs: ['everySecond', 'five5Secs: everyFiveSeconds']
|
||||
* })
|
||||
* class IntervalDir {
|
||||
* everySecond = new EventEmitter();
|
||||
@ -512,7 +512,7 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
events: string[];
|
||||
outputs: string[];
|
||||
|
||||
/**
|
||||
* Specify the events, actions, properties and attributes related to the host element.
|
||||
@ -739,12 +739,12 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
queries: StringMap<string, any>;
|
||||
|
||||
constructor({
|
||||
selector, properties, events, host, bindings, exportAs, moduleId, queries,
|
||||
selector, inputs, outputs, host, bindings, exportAs, moduleId, queries,
|
||||
compileChildren = true,
|
||||
}: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -754,8 +754,8 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
} = {}) {
|
||||
super();
|
||||
this.selector = selector;
|
||||
this.properties = properties;
|
||||
this.events = events;
|
||||
this.inputs = inputs;
|
||||
this.outputs = outputs;
|
||||
this.host = host;
|
||||
this.exportAs = exportAs;
|
||||
this.moduleId = moduleId;
|
||||
@ -861,12 +861,12 @@ export class ComponentMetadata extends DirectiveMetadata {
|
||||
*/
|
||||
viewBindings: any[];
|
||||
|
||||
constructor({selector, properties, events, host, exportAs, moduleId, bindings, viewBindings,
|
||||
constructor({selector, inputs, outputs, host, exportAs, moduleId, bindings, viewBindings,
|
||||
changeDetection = ChangeDetectionStrategy.Default, queries, compileChildren = true}:
|
||||
{
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
inputs?: string[],
|
||||
outputs?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
@ -878,8 +878,8 @@ export class ComponentMetadata extends DirectiveMetadata {
|
||||
} = {}) {
|
||||
super({
|
||||
selector: selector,
|
||||
properties: properties,
|
||||
events: events,
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
host: host,
|
||||
exportAs: exportAs,
|
||||
moduleId: moduleId,
|
||||
@ -922,17 +922,17 @@ export class PipeMetadata extends InjectableMetadata {
|
||||
}
|
||||
|
||||
/**
|
||||
* Declares a data-bound property.
|
||||
* Declares a data-bound input property.
|
||||
*
|
||||
* Angular automatically updates data-bound properties during change detection.
|
||||
*
|
||||
* `PropertyMetadata` takes an optional parameters that specifies that name
|
||||
* `InputMetadata` takes an optional parameters that specifies that name
|
||||
* used when instantiating a component in the template. When not provided,
|
||||
* the class property name is used.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* The following example creates a component with two data-bound properties.
|
||||
* The following example creates a component with two input properties.
|
||||
*
|
||||
* ```typescript
|
||||
* @Component({selector: 'bank-account'})
|
||||
@ -943,8 +943,8 @@ export class PipeMetadata extends InjectableMetadata {
|
||||
* `
|
||||
* })
|
||||
* class BankAccount {
|
||||
* @Property() bankName: string;
|
||||
* @Property('account-id') id: string;
|
||||
* @Input() bankName: string;
|
||||
* @Input('account-id') id: string;
|
||||
*
|
||||
* // this property is not bound, and won't be automatically updated by Angular
|
||||
* normalizedBankName: string;
|
||||
@ -963,7 +963,7 @@ export class PipeMetadata extends InjectableMetadata {
|
||||
* ```
|
||||
*/
|
||||
@CONST()
|
||||
export class PropertyMetadata {
|
||||
export class InputMetadata {
|
||||
constructor(
|
||||
/**
|
||||
* Name used when instantiating a component in the temlate.
|
||||
@ -972,12 +972,12 @@ export class PropertyMetadata {
|
||||
}
|
||||
|
||||
/**
|
||||
* Declares an event-bound property.
|
||||
* Declares an event-bound output property.
|
||||
*
|
||||
* When an event-bound property emits an event, an event handler attached to that event
|
||||
* When an output property emits an event, an event handler attached to that event
|
||||
* the template is invoked.
|
||||
*
|
||||
* `EventMetadata` takes an optional parameters that specifies that name
|
||||
* `OutputMetadata` takes an optional parameters that specifies that name
|
||||
* used when instantiating a component in the template. When not provided,
|
||||
* the class property name is used.
|
||||
*
|
||||
@ -988,8 +988,8 @@ export class PropertyMetadata {
|
||||
* selector: 'interval-dir',
|
||||
* })
|
||||
* class IntervalDir {
|
||||
* @Event() everySecond = new EventEmitter();
|
||||
* @Event('everyFiveSeconds') five5Secs = new EventEmitter();
|
||||
* @Output() everySecond = new EventEmitter();
|
||||
* @Output('everyFiveSeconds') five5Secs = new EventEmitter();
|
||||
*
|
||||
* constructor() {
|
||||
* setInterval(() => this.everySecond.next("event"), 1000);
|
||||
@ -1013,7 +1013,7 @@ export class PropertyMetadata {
|
||||
* ```
|
||||
*/
|
||||
@CONST()
|
||||
export class EventMetadata {
|
||||
export class OutputMetadata {
|
||||
constructor(public bindingPropertyName?: string) {}
|
||||
}
|
||||
|
||||
|
@ -143,8 +143,8 @@ export class RenderDirectiveMetadata {
|
||||
id: any;
|
||||
selector: string;
|
||||
compileChildren: boolean;
|
||||
events: string[];
|
||||
properties: string[];
|
||||
outputs: string[];
|
||||
inputs: string[];
|
||||
readAttributes: string[];
|
||||
type: number;
|
||||
callOnDestroy: boolean;
|
||||
@ -165,18 +165,18 @@ export class RenderDirectiveMetadata {
|
||||
// group 2: "event" from "(event)"
|
||||
private static _hostRegExp = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))$/g;
|
||||
|
||||
constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
|
||||
properties, readAttributes, type, callOnDestroy, callOnChanges, callDoCheck,
|
||||
callOnInit, callAfterContentInit, callAfterContentChecked, callAfterViewInit,
|
||||
callAfterViewChecked, changeDetection, exportAs, queries}: {
|
||||
constructor({id, selector, compileChildren, outputs, hostListeners, hostProperties,
|
||||
hostAttributes, inputs, readAttributes, type, callOnDestroy, callOnChanges,
|
||||
callDoCheck, callOnInit, callAfterContentInit, callAfterContentChecked,
|
||||
callAfterViewInit, callAfterViewChecked, changeDetection, exportAs, queries}: {
|
||||
id?: string,
|
||||
selector?: string,
|
||||
compileChildren?: boolean,
|
||||
events?: string[],
|
||||
outputs?: string[],
|
||||
hostListeners?: Map<string, string>,
|
||||
hostProperties?: Map<string, string>,
|
||||
hostAttributes?: Map<string, string>,
|
||||
properties?: string[],
|
||||
inputs?: string[],
|
||||
readAttributes?: string[],
|
||||
type?: number,
|
||||
callOnDestroy?: boolean,
|
||||
@ -194,11 +194,11 @@ export class RenderDirectiveMetadata {
|
||||
this.id = id;
|
||||
this.selector = selector;
|
||||
this.compileChildren = isPresent(compileChildren) ? compileChildren : true;
|
||||
this.events = events;
|
||||
this.outputs = outputs;
|
||||
this.hostListeners = hostListeners;
|
||||
this.hostAttributes = hostAttributes;
|
||||
this.hostProperties = hostProperties;
|
||||
this.properties = properties;
|
||||
this.inputs = inputs;
|
||||
this.readAttributes = readAttributes;
|
||||
this.type = type;
|
||||
this.callOnDestroy = callOnDestroy;
|
||||
@ -214,16 +214,16 @@ export class RenderDirectiveMetadata {
|
||||
this.queries = queries;
|
||||
}
|
||||
|
||||
static create({id, selector, compileChildren, events, host, properties, readAttributes, type,
|
||||
static create({id, selector, compileChildren, outputs, host, inputs, readAttributes, type,
|
||||
callOnDestroy, callOnChanges, callDoCheck, callOnInit, callAfterContentInit,
|
||||
callAfterContentChecked, callAfterViewInit, callAfterViewChecked, changeDetection,
|
||||
exportAs, queries}: {
|
||||
id?: string,
|
||||
selector?: string,
|
||||
compileChildren?: boolean,
|
||||
events?: string[],
|
||||
outputs?: string[],
|
||||
host?: Map<string, string>,
|
||||
properties?: string[],
|
||||
inputs?: string[],
|
||||
readAttributes?: string[],
|
||||
type?: number,
|
||||
callOnDestroy?: boolean,
|
||||
@ -259,11 +259,11 @@ export class RenderDirectiveMetadata {
|
||||
id: id,
|
||||
selector: selector,
|
||||
compileChildren: compileChildren,
|
||||
events: events,
|
||||
outputs: outputs,
|
||||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
hostAttributes: hostAttributes,
|
||||
properties: properties,
|
||||
inputs: inputs,
|
||||
readAttributes: readAttributes,
|
||||
type: type,
|
||||
callOnDestroy: callOnDestroy,
|
||||
|
@ -65,8 +65,8 @@ export class DirectiveParser implements CompileStep {
|
||||
var dirMetadata = this._directives[directiveIndex];
|
||||
var directiveBinderBuilder = elementBinder.bindDirective(directiveIndex);
|
||||
current.compileChildren = current.compileChildren && dirMetadata.compileChildren;
|
||||
if (isPresent(dirMetadata.properties)) {
|
||||
ListWrapper.forEach(dirMetadata.properties, (bindConfig) => {
|
||||
if (isPresent(dirMetadata.inputs)) {
|
||||
ListWrapper.forEach(dirMetadata.inputs, (bindConfig) => {
|
||||
this._bindDirectiveProperty(bindConfig, current, directiveBinderBuilder);
|
||||
});
|
||||
}
|
||||
|
Reference in New Issue
Block a user