honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ivy): ensure styling pipes are allocated before used in bindings (#26593) 

PR Close #26593
This commit is contained in:
Matias Niemelä 2018-10-19 09:30:41 -07:00
parent 67789f10ef
commit f6c2db818e
2 changed files with 50 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -625,5 +625,46 @@ describe('compiler compliance: styling', () => {
expectEmit(result.source, template, 'Incorrect template');
});
it('should stamp out pipe definitions in the creation block if used by styling bindings',
() => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: \`<div [style]="myStyleExp | stylePipe" [class]="myClassExp | classPipe"></div>\`
})
export class MyComponent {
myStyleExp = [{color:'red'}, {color:'blue', duration:1000}]
myClassExp = 'foo bar apple';
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}
`
}
};
const template = `
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(null, null, $r3$.ɵdefaultStyleSanitizer);
$r3$.ɵpipe(1, "classPipe");
$r3$.ɵpipe(2, "stylePipe");
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $r3$.ɵpipeBind1(1, 0, $ctx$.myClassExp), $r3$.ɵpipeBind1(2, 2, $ctx$.myStyleExp));
$r3$.ɵelementStylingApply(0);
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
});
});

13
packages/compiler/src/render3/view/template.ts
View File

@ -643,18 +643,23 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
const stylingInput = mapBasedStyleInput || mapBasedClassInput;
if (stylingInput) {
// these values must be outside of the update block so that they can
// be evaluted (the AST visit call) during creation time so that any
// pipes can be picked up in time before the template is built
const mapBasedClassValue =
mapBasedClassInput ? mapBasedClassInput.value.visit(this._valueConverter) : null;
const mapBasedStyleValue =
mapBasedStyleInput ? mapBasedStyleInput.value.visit(this._valueConverter) : null;
this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
const params: o.Expression[] = [indexLiteral];
if (mapBasedClassInput) {
const mapBasedClassValue = mapBasedClassInput.value.visit(this._valueConverter);
if (mapBasedClassValue) {
params.push(this.convertPropertyBinding(implicit, mapBasedClassValue, true));
} else if (mapBasedStyleInput) {
params.push(o.NULL_EXPR);
}
if (mapBasedStyleInput) {
const mapBasedStyleValue = mapBasedStyleInput.value.visit(this._valueConverter);
if (mapBasedStyleValue) {
params.push(this.convertPropertyBinding(implicit, mapBasedStyleValue, true));
}