cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): correctly associate output bound events with directives (#31938)

Browse Source 
Previously, bound events were incorrectly bound to directives with
inputs matching the bound event attribute. This fixes that so bound
events can only be bound to directives with matching outputs.

Adds tests for all kinds of directive matching on bound attributes.

PR Close #31938
This commit is contained in:
Ayaz Hafiz
2019-07-31 14:47:25 -07:00
committed by Kara Erickson
parent 7938ff34b1
commit 3e201181bb
2 changed files with 95 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/compiler/src/render3/view/t2_binder.ts
View File

@ -269,20 +269,23 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
});
// Associate attributes/bindings on the node with directives or with the node itself.
const processAttribute = (attribute: BoundAttribute | BoundEvent | TextAttribute) => {
let dir = directives.find(dir => dir.inputs.hasOwnProperty(attribute.name));
if (dir !== undefined) {
this.bindings.set(attribute, dir);
} else {
this.bindings.set(attribute, node);
}
};
node.attributes.forEach(processAttribute);
node.inputs.forEach(processAttribute);
node.outputs.forEach(processAttribute);
type BoundNode = BoundAttribute | BoundEvent | TextAttribute;
const setAttributeBinding =
(attribute: BoundNode, ioType: keyof Pick<DirectiveMeta, 'inputs'|'outputs'>) => {
const dir = directives.find(dir => dir[ioType].hasOwnProperty(attribute.name));
const binding = dir !== undefined ? dir : node;
this.bindings.set(attribute, binding);
};
// Node inputs (bound attributes) and text attributes can be bound to an
// input on a directive.
node.inputs.forEach(input => setAttributeBinding(input, 'inputs'));
node.attributes.forEach(attr => setAttributeBinding(attr, 'inputs'));
if (node instanceof Template) {
node.templateAttrs.forEach(processAttribute);
node.templateAttrs.forEach(attr => setAttributeBinding(attr, 'inputs'));
}
// Node outputs (bound events) can be bound to an output on a directive.
node.outputs.forEach(output => setAttributeBinding(output, 'outputs'));
// Recurse into the node's children.
node.children.forEach(child => child.visit(this));