feat(Events): allow a different event vs field name

closes #2272 closes #2344
angular · Jun 8, 2015 · 29c72ab · 29c72ab
1 parent 79f3f3b
commit 29c72ab
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/modules/angular2/src/core/annotations_impl/annotations.ts b/modules/angular2/src/core/annotations_impl/annotations.ts
@@ -550,7 +550,7 @@ export class Directive extends Injectable {
  * events: ['statusChange']
  * })
  * class TaskComponent {
- * statusChange:EventEmitter;
+ * statusChange: EventEmitter;
  *
  * constructor() {
  * this.statusChange = new EventEmitter();
@@ -561,6 +561,26 @@ export class Directive extends Injectable {
  * }
  * }
  * ```
+ *
+ * Use `propertyName: eventName` when the event emitter property name is different from the name
+ * of the emitted event:
+ *
+ * @Component({
+ * events: ['status: statusChange']
+ * })
+ * class TaskComponent {
+ * status: EventEmitter;
+ *
+ * constructor() {
+ * this.status = new EventEmitter();
+ * }
+ *
+ * onComplete() {
+ * this.status.next('completed');
+ * }
+ * }
+ * ```
+ *
  */
  events: List<string>;
 

diff --git a/modules/angular2/src/core/compiler/element_injector.ts b/modules/angular2/src/core/compiler/element_injector.ts
@@ -4,7 +4,8 @@ import {
  Type,
  BaseException,
  stringify,
- CONST_EXPR
+ CONST_EXPR,
+ StringWrapper
 } from 'angular2/src/facade/lang';
 import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
 import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
@@ -382,8 +383,20 @@ export class BindingData {
  createEventEmitterAccessors() {
  if (!(this.binding instanceof DirectiveBinding)) return [];
  var db = <DirectiveBinding>this.binding;
- return ListWrapper.map(db.eventEmitters, eventName => new EventEmitterAccessor(
- eventName, reflector.getter(eventName)));
+ return ListWrapper.map(db.eventEmitters, eventConfig => {
+ let fieldName;
+ let eventName;
+ var colonIdx = eventConfig.indexOf(':');
+ if (colonIdx > -1) {
+ // long format: 'fieldName: eventName'
+ fieldName = StringWrapper.substring(eventConfig, 0, colonIdx).trim();
+ eventName = StringWrapper.substring(eventConfig, colonIdx + 1).trim();
+ } else {
+ // short format: 'name' when fieldName and eventName are the same
+ fieldName = eventName = eventConfig;
+ }
+ return new EventEmitterAccessor(eventName, reflector.getter(fieldName))
+ });
  }
 
  createHostActionAccessors() {

diff --git a/modules/angular2/test/core/compiler/element_injector_spec.ts b/modules/angular2/test/core/compiler/element_injector_spec.ts
@@ -418,6 +418,18 @@ export function main() {
  expect(accessor.getter(new HasEventEmitter())).toEqual('emitter');
  });
 
+ it('should allow a different event vs field name', () => {
+ var binding = DirectiveBinding.createFromType(HasEventEmitter,
+ new dirAnn.Directive({events: ['emitter: publicEmitter']}));
+
+ var inj = createPei(null, 0, [binding]);
+ expect(inj.eventEmitterAccessors.length).toEqual(1);
+
+ var accessor = inj.eventEmitterAccessors[0][0];
+ expect(accessor.eventName).toEqual('publicEmitter');
+ expect(accessor.getter(new HasEventEmitter())).toEqual('emitter');
+ });
+
  it('should return a list of hostAction accessors', () => {
  var binding = DirectiveBinding.createFromType(
  HasEventEmitter, new dirAnn.Directive({hostActions: {'hostActionName': 'onAction'}}));
@@ -431,7 +443,6 @@ export function main() {
  });
  });
 
-
  describe(".create", () => {
  it("should collect hostInjector injectables from all directives", () => {
  var pei = createPei(null, 0, [