fix(ivy): ensure pipes indices are referenced in styling bindings (#26755)

PR Close #26755
This commit is contained in:
Matias Niemelä 2018-10-22 15:16:03 -07:00
parent d52d82d744
commit 95993e1dd5
2 changed files with 69 additions and 11 deletions

View File

@ -660,5 +660,62 @@ describe('compiler compliance: styling', () => {
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should properly offset multiple style pipe references for styling bindings', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: \`
<div [class]="{}"
[class.foo]="fooExp | pipe:2000"
[style]="myStyleExp | pipe:1000"
[style.bar]="barExp | pipe:3000"
[style.baz]="bazExp | pipe:4000">
{{ item }}</div>\`
})
export class MyComponent {
myStyleExp = {};
fooExp = 'foo';
barExp = 'bar';
bazExp = 'baz';
items = [1,2,3];
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}
`
}
};
const template = `
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling($e0_styling$, $e1_styling$, $r3$.ɵdefaultStyleSanitizer);
$r3$.ɵpipe(1, "pipe");
$r3$.ɵpipe(2, "pipe");
$r3$.ɵpipe(3, "pipe");
$r3$.ɵpipe(4, "pipe");
$r3$.ɵtext(5);
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $e2_styling$, $r3$.ɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
$r3$.ɵelementStyleProp(0, 0, $r3$.ɵpipeBind2(2, 4, $ctx$.barExp, 3000));
$r3$.ɵelementStyleProp(0, 1, $r3$.ɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
$r3$.ɵelementClassProp(0, 0, $r3$.ɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
$r3$.ɵelementStylingApply(0);
$r3$.ɵtextBinding(5, $r3$.ɵinterpolation1(" ", $ctx$.item, ""));
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
});
});

View File

@ -675,15 +675,18 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
const key = input.name;
const styleIndex: number = stylesIndexMap[key] !;
const value = input.value.visit(this._valueConverter);
const params: o.Expression[] = [
indexLiteral, o.literal(styleIndex), this.convertPropertyBinding(implicit, value, true)
];
this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
const params: o.Expression[] = [
indexLiteral, o.literal(styleIndex),
this.convertPropertyBinding(implicit, value, true)
];
if (input.unit != null) {
params.push(o.literal(input.unit));
}
if (input.unit != null) {
params.push(o.literal(input.unit));
}
this.updateInstruction(input.sourceSpan, R3.elementStyleProp, params);
return params;
});
}
lastInputCommand = styleInputs[styleInputs.length - 1];
@ -701,10 +704,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
const classIndex: number = classesIndexMap[key] !;
const value = input.value.visit(this._valueConverter);
this.updateInstruction(input.sourceSpan, R3.elementClassProp, () => {
return [
indexLiteral, o.literal(classIndex),
this.convertPropertyBinding(implicit, value, true), ...params
];
const valueLiteral = this.convertPropertyBinding(implicit, value, true);
return [indexLiteral, o.literal(classIndex), valueLiteral];
});
}