feat(Events): allow a different local vs public name

closes angular#2272
vicb · Jun 4, 2015 · 4848416 · 4848416
1 parent 53694eb
commit 4848416
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 16 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';
@@ -380,8 +381,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 localName;
+      let publicName;
+      var colonIdx = eventConfig.indexOf(':');
+      if (colonIdx > -1) {
+        // long format: 'localName: publicName'
+        localName = StringWrapper.substring(eventConfig, 0, colonIdx).trim();
+        publicName = StringWrapper.substring(eventConfig, colonIdx + 1).trim();
+      } else {
+        // short format: 'name' when localName and publicName are the same
+        localName = publicName = eventConfig;
+      }
+      return new EventEmitterAccessor(publicName, reflector.getter(localName))
+    });
   }
 
   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 internal vs public 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'}}));

diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
@@ -694,6 +694,32 @@ export function main() {
                });
          }));
 
+      it('should support EventEmitter with local names',
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           tb.overrideView(MyComp, new viewAnn.View({
+             template: '<div emitter listener></div>',
+             directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
+           }));
+
+           tb.createView(MyComp, {context: ctx})
+               .then((view) => {
+
+                 var injector = view.rawView.elementInjectors[0];
+
+                 var emitter = injector.get(DirectiveEmitingEvent);
+                 var listener = injector.get(DirectiveListeningEvent);
+
+                 expect(listener.publicEventMsg).toEqual('');
+
+                 ObservableWrapper.subscribe(emitter.localEvent, (_) => {
+                   expect(listener.publicEventMsg).toEqual('fired !');
+                   async.done();
+                 });
+
+                 emitter.fireLocalEvent('fired !');
+               });
+         }));
+
       it('should support [()] syntax', inject([TestBed, AsyncTestCompleter], (tb, async) => {
            tb.overrideView(MyComp, new viewAnn.View({
              template: '<div [(control)]="ctxProp" two-way></div>',
@@ -1379,18 +1405,16 @@ class DoublePipeFactory {
   create(cdRef) { return new DoublePipe(); }
 }
 
-@Directive({selector: '[emitter]', events: ['event']})
+@Directive({selector: '[emitter]', events: ['event', 'localEvent: publicEvent']})
 @Injectable()
 class DirectiveEmitingEvent {
-  msg: string;
-  event: EventEmitter;
-
-  constructor() {
-    this.msg = '';
-    this.event = new EventEmitter();
-  }
+  msg: string = '';
+  event: EventEmitter = new EventEmitter();
+  localEvent: EventEmitter = new EventEmitter();
 
   fireEvent(msg: string) { ObservableWrapper.callNext(this.event, msg); }
+
+  fireLocalEvent(msg: string) { ObservableWrapper.callNext(this.localEvent, msg); }
 }
 
 @Directive({selector: '[update-host-attributes]', hostAttributes: {'role': 'button'}})
@@ -1419,14 +1443,18 @@ class DirectiveUpdatingHostActions {
   triggerSetAttr(attrValue) { ObservableWrapper.callNext(this.setAttr, {'attrValue': attrValue}); }
 }
 
-@Directive({selector: '[listener]', hostListeners: {'event': 'onEvent($event)'}})
+@Directive({
+  selector: '[listener]',
+  hostListeners: {'event': 'onEvent($event)', 'publicEvent': 'onPublicEvent($event)'}
+})
 @Injectable()
 class DirectiveListeningEvent {
-  msg: string;
-
-  constructor() { this.msg = ''; }
+  msg: string = '';
+  publicEventMsg: string = '';
 
   onEvent(msg: string) { this.msg = msg; }
+
+  onPublicEvent(msg: string) { this.publicEventMsg = msg; }
 }
 
 @Directive({