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

fix(ivy): ensure [style] and [class] bindings are placed in the same instruction (#26126) 

PR Close #26126
This commit is contained in:
Matias Niemelä 2018-09-26 23:14:24 -07:00 committed by Alex Rickabaugh
parent 9523991a9b
commit 7cf5807100
2 changed files with 57 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -539,4 +539,46 @@ describe('compiler compliance: styling', () => {
expectEmit(result.source, template, 'Incorrect template');
});
});
describe('[style] mixed with [class]', () => {
it('should combine [style] and [class] bindings into a single instruction', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: \`<div [style]="myStyleExp" [class]="myClassExp"></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$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $ctx$.myClassExp, $ctx$.myStyleExp);
$r3$.ɵelementStylingApply(0);
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
});
});

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

@ -549,21 +549,22 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
const stylingInput = mapBasedStyleInput || mapBasedClassInput;
if (stylingInput) {
const params: o.Expression[] = [];
let value: AST;
if (mapBasedClassInput) {
value = mapBasedClassInput.value.visit(this._valueConverter);
} else if (mapBasedStyleInput) {
params.push(o.NULL_EXPR);
}
if (mapBasedStyleInput) {
value = mapBasedStyleInput.value.visit(this._valueConverter);
}
this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
params.push(this.convertPropertyBinding(implicit, value, true));
return [indexLiteral, ...params];
const params: o.Expression[] = [indexLiteral];
if (mapBasedClassInput) {
const mapBasedClassValue = mapBasedClassInput.value.visit(this._valueConverter);
params.push(this.convertPropertyBinding(implicit, mapBasedClassValue, true));
} else if (mapBasedStyleInput) {
params.push(o.NULL_EXPR);
}
if (mapBasedStyleInput) {
const mapBasedStyleValue = mapBasedStyleInput.value.visit(this._valueConverter);
params.push(this.convertPropertyBinding(implicit, mapBasedStyleValue, true));
}
return params;
});
}