Skip to content

Commit d260a05

Browse files
tboschtbosch
committed
fix(compiler): explicitly support event bindings also on <template> elements
Although these events don’t fire events themselves, there might be directives on them that fire events.
1 parent 5a504e6 commit d260a05

3 files changed

Lines changed: 58 additions & 9 deletions

File tree

‎modules/angular2/src/core/compiler/template_parser.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,8 @@ class TemplateParseVisitor implements HtmlAstVisitor {
212212
parsedElement =
213213
new NgContentAst(this.ngContentCount++, elementNgContentIndex, element.sourceInfo);
214214
} else if (isTemplateElement) {
215-
this._assertNoComponentsNorElementBindingsOnTemplate(directives, elementProps, events,
215+
this._assertAllEventsPublishedByDirectives(directives, events, element.sourceInfo);
216+
this._assertNoComponentsNorElementBindingsOnTemplate(directives, elementProps,
216217
element.sourceInfo);
217218
parsedElement = new EmbeddedTemplateAst(attrs, vars, directives, children,
218219
elementNgContentIndex, element.sourceInfo);
@@ -231,7 +232,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
231232
var templateElementProps: BoundElementPropertyAst[] = this._createElementPropertyAsts(
232233
element.name, templateElementOrDirectiveProps, templateDirectives);
233234
this._assertNoComponentsNorElementBindingsOnTemplate(templateDirectives, templateElementProps,
234-
[], element.sourceInfo);
235+
element.sourceInfo);
235236
parsedElement = new EmbeddedTemplateAst([], templateVars, templateDirectives, [parsedElement],
236237
component.findNgContentIndex(templateCssSelector),
237238
element.sourceInfo);
@@ -559,7 +560,6 @@ class TemplateParseVisitor implements HtmlAstVisitor {
559560

560561
private _assertNoComponentsNorElementBindingsOnTemplate(directives: DirectiveAst[],
561562
elementProps: BoundElementPropertyAst[],
562-
events: BoundEventAst[],
563563
sourceInfo: string) {
564564
var componentTypeNames: string[] = this._findComponentDirectiveNames(directives);
565565
if (componentTypeNames.length > 0) {
@@ -570,9 +570,20 @@ class TemplateParseVisitor implements HtmlAstVisitor {
570570
this._reportError(
571571
`Property binding ${prop.name} not used by any directive on an embedded template in ${prop.sourceInfo}`);
572572
});
573+
}
574+
575+
private _assertAllEventsPublishedByDirectives(directives: DirectiveAst[], events: BoundEventAst[],
576+
sourceInfo: string) {
577+
var allDirectiveEvents = new Set<string>();
578+
directives.forEach(directive => {
579+
StringMapWrapper.forEach(directive.directive.outputs,
580+
(eventName, _) => { allDirectiveEvents.add(eventName); });
581+
});
573582
events.forEach(event => {
574-
this._reportError(
575-
`Event binding ${event.name} on an embedded template in ${event.sourceInfo}`);
583+
if (isPresent(event.target) || !SetWrapper.has(allDirectiveEvents, event.name)) {
584+
this._reportError(
585+
`Event binding ${event.fullName} not emitted by any directive on an embedded template in ${sourceInfo}`);
586+
}
576587
});
577588
}
578589
}

‎modules/angular2/test/core/compiler/template_parser_spec.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,19 @@ export function main() {
267267
]);
268268
});
269269

270+
it('should allow events on explicit embedded templates that are emitted by a directive',
271+
() => {
272+
var dirA = CompileDirectiveMetadata.create({
273+
selector: 'template',
274+
outputs: ['e'],
275+
type: new CompileTypeMetadata({name: 'DirA'})
276+
});
277+
expect(humanizeTemplateAsts(parse('<template (e)="f"></template>', [dirA])))
278+
.toEqual([
279+
[EmbeddedTemplateAst, 'TestComp > template:nth-child(0)'],
280+
[DirectiveAst, dirA, 'TestComp > template:nth-child(0)'],
281+
]);
282+
});
270283
});
271284

272285
describe('bindon', () => {
@@ -804,7 +817,7 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp > div:nth-ch
804817
More than one component: DirB,DirA in TestComp > div:nth-child(0)`);
805818
});
806819

807-
it('should not allow components or element nor event bindings on explicit embedded templates',
820+
it('should not allow components or element bindings nor dom events on explicit embedded templates',
808821
() => {
809822
var dirA = CompileDirectiveMetadata.create({
810823
selector: '[a]',
@@ -814,9 +827,9 @@ More than one component: DirB,DirA in TestComp > div:nth-child(0)`);
814827
});
815828
expect(() => parse('<template [a]="b" (e)="f"></template>', [dirA]))
816829
.toThrowError(`Template parse errors:
830+
Event binding e not emitted by any directive on an embedded template in TestComp > template:nth-child(0)
817831
Components on an embedded template: DirA in TestComp > template:nth-child(0)
818-
Property binding a not used by any directive on an embedded template in TestComp > template:nth-child(0)[[a]=b]
819-
Event binding e on an embedded template in TestComp > template:nth-child(0)[(e)=f]`);
832+
Property binding a not used by any directive on an embedded template in TestComp > template:nth-child(0)[[a]=b]`);
820833
});
821834

822835
it('should not allow components or element bindings on inline embedded templates', () => {

‎modules/angular2/test/core/linker/integration_spec.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -800,7 +800,7 @@ export function main() {
800800
});
801801
}));
802802

803-
it('should support events via EventEmitter',
803+
it('should support events via EventEmitter on regular elements',
804804
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
805805
tcb.overrideView(MyComp, new ViewMetadata({
806806
template: '<div emitter listener></div>',
@@ -825,6 +825,31 @@ export function main() {
825825
});
826826
}));
827827

828+
it('should support events via EventEmitter on template elements',
829+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
830+
tcb.overrideView(MyComp, new ViewMetadata({
831+
template: '<template emitter listener></template>',
832+
directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
833+
}))
834+
835+
.createAsync(MyComp)
836+
.then((rootTC) => {
837+
838+
var tc = rootTC.debugElement.componentViewChildren[0];
839+
var emitter = tc.inject(DirectiveEmitingEvent);
840+
var listener = tc.inject(DirectiveListeningEvent);
841+
842+
expect(listener.msg).toEqual('');
843+
844+
ObservableWrapper.subscribe(emitter.event, (_) => {
845+
expect(listener.msg).toEqual('fired !');
846+
async.done();
847+
});
848+
849+
emitter.fireEvent('fired !');
850+
});
851+
}));
852+
828853
it('should support [()] syntax',
829854
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
830855
tcb.overrideView(MyComp, new ViewMetadata({

0 commit comments

Comments
 (0)