fix(ivy): handle pipes in i18n attributes properly (#30573)

Prior to this change we processed binding expression (including bindings with pipes) in i18n attributes before we generate update instruction. As a result, slot offsets for pipeBind instructions were calculated incorrectly. Now we perform binding expression processing when we generate "update block" instructions, so offsets are calculated correctly.

PR Close #30573
This commit is contained in:
Andrew Kushnir 2019-05-20 14:40:44 -07:00 committed by Jason Aden
parent 70fd4300f4
commit 02523debe5
3 changed files with 16 additions and 7 deletions

View File

@ -470,7 +470,7 @@ describe('i18n support in the view compiler', () => {
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵselect(0); $r3$.ɵɵselect(0);
$r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA))); $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 6, ctx.valueA)));
$r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB)); $r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB));
$r3$.ɵɵi18nApply(2); $r3$.ɵɵi18nApply(2);
$r3$.ɵɵselect(3); $r3$.ɵɵselect(3);
@ -520,7 +520,7 @@ describe('i18n support in the view compiler', () => {
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵselect(0); $r3$.ɵɵselect(0);
$r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA))); $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 1, ctx.valueA)));
$r3$.ɵɵi18nApply(2); $r3$.ɵɵi18nApply(2);
} }
} }
@ -567,7 +567,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 2) { if (rf & 2) {
const $outer_r1$ = ctx.$implicit; const $outer_r1$ = ctx.$implicit;
$r3$.ɵɵselect(1); $r3$.ɵɵselect(1);
$r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 0, $outer_r1$))); $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 1, $outer_r1$)));
$r3$.ɵɵi18nApply(3); $r3$.ɵɵi18nApply(3);
} }
} }
@ -699,7 +699,7 @@ describe('i18n support in the view compiler', () => {
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵselect(0); $r3$.ɵɵselect(0);
$r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA))); $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 6, ctx.valueA)));
$r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB)); $r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB));
$r3$.ɵɵi18nApply(2); $r3$.ɵɵi18nApply(2);
$r3$.ɵɵselect(3); $r3$.ɵɵselect(3);
@ -754,7 +754,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 2) { if (rf & 2) {
const $outer_r1$ = ctx.$implicit; const $outer_r1$ = ctx.$implicit;
$r3$.ɵɵselect(1); $r3$.ɵɵselect(1);
$r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 0, $outer_r1$))); $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 1, $outer_r1$)));
$r3$.ɵɵi18nApply(3); $r3$.ɵɵi18nApply(3);
} }
} }

View File

@ -643,8 +643,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
i18nAttrArgs.push(o.literal(attr.name), this.i18nTranslate(message, params)); i18nAttrArgs.push(o.literal(attr.name), this.i18nTranslate(message, params));
converted.expressions.forEach(expression => { converted.expressions.forEach(expression => {
hasBindings = true; hasBindings = true;
const binding = this.convertExpressionBinding(implicit, expression); this.updateInstruction(
this.updateInstruction(elementIndex, element.sourceSpan, R3.i18nExp, [binding]); elementIndex, element.sourceSpan, R3.i18nExp,
() => [this.convertExpressionBinding(implicit, expression)]);
}); });
} }
} }

View File

@ -570,6 +570,14 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour John"></div>`); expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour John"></div>`);
}); });
it('with pipes', () => {
ɵi18nConfigureLocalize(
{translations: {'hello {$interpolation}': 'bonjour {$interpolation}'}});
const fixture = initWithTemplate(
AppComp, `<div i18n i18n-title title="hello {{name | uppercase}}"></div>`);
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour ANGULAR"></div>`);
});
it('multiple attributes', () => { it('multiple attributes', () => {
ɵi18nConfigureLocalize( ɵi18nConfigureLocalize(
{translations: {'hello {$interpolation}': 'bonjour {$interpolation}'}}); {translations: {'hello {$interpolation}': 'bonjour {$interpolation}'}});