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

fix(ivy): ensure @animation host bindings/listeners work properly (#27896)

Browse Source 
PR Close #27896
This commit is contained in:
Matias Niemelä
2019-01-03 18:24:21 -08:00
committed by Kara Erickson
parent 0bd9deb9f5
commit 5d3dcfc6ad
16 changed files with 234 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -434,14 +434,14 @@ describe('compiler compliance', () => {
$r3$.ɵallocHostVars(14);
}
if (rf & 2) {
$r3$.ɵelementProperty(elIndex, "expansionHeight",
$r3$.ɵcomponentHostSyntheticProperty(elIndex, "@expansionHeight",
$r3$.ɵbind(
$r3$.ɵpureFunction2(5, $_c1$, ctx.getExpandedState(),
$r3$.ɵpureFunction2(2, $_c0$, ctx.collapsedHeight, ctx.expandedHeight)
)
), null, true
);
$r3$.ɵelementProperty(elIndex, "expansionWidth",
$r3$.ɵcomponentHostSyntheticProperty(elIndex, "@expansionWidth",
$r3$.ɵbind(
$r3$.ɵpureFunction2(11, $_c1$, ctx.getExpandedState(),
$r3$.ɵpureFunction2(8, $_c2$, ctx.collapsedWidth, ctx.expandedWidth)

2
packages/compiler-cli/test/compliance/r3_view_compiler_spec.ts
View File

@ -173,7 +173,7 @@ describe('r3_view_compiler', () => {
};
const template = `
const _c0 = [3, "mySelector"];
const _c0 = [3, "@mySelector"];
// ...
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {

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

@ -281,8 +281,8 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div", _c0);
$r3$.ɵlistener("@myAnimation.start", function MyComponent_Template_div__myAnimation_start_0_listener($event) { return ctx.onStart($event); });
$r3$.ɵlistener("@myAnimation.done", function MyComponent_Template_div__myAnimation_done_0_listener($event) { return ctx.onDone($event); });
$r3$.ɵlistener("@myAnimation.start", function MyComponent_Template_div_animation_myAnimation_start_0_listener($event) { return ctx.onStart($event); });
$r3$.ɵlistener("@myAnimation.done", function MyComponent_Template_div_animation_myAnimation_done_0_listener($event) { return ctx.onDone($event); });
$r3$.ɵelementEnd();
} if (rf & 2) {
$r3$.ɵelementProperty(0, "@myAnimation", $r3$.ɵbind(ctx.exp));
@ -296,6 +296,64 @@ describe('compiler compliance: styling', () => {
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should generate animation host binding and listener code for directives', () => {
const files = {
app: {
'spec.ts': `
import {Directive, Component, NgModule} from '@angular/core';
@Directive({
selector: '[my-anim-dir]',
animations: [
{name: 'myAnim'}
],
host: {
'[@myAnim]': 'myAnimState',
'(@myAnim.start)': 'onStart()',
'(@myAnim.done)': 'onDone()'
}
})
class MyAnimDir {
onStart() {}
onDone() {}
myAnimState = '123';
}
@Component({
selector: 'my-cmp',
template: \`
<div my-anim-dir></div>
\`
})
class MyComponent {
}
@NgModule({declarations: [MyComponent, MyAnimDir]})
export class MyModule {}
`
}
};
const template = `
MyAnimDir.ngDirectiveDef = $r3$.ɵdefineDirective({
…
hostBindings: function MyAnimDir_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵallocHostVars(1);
$r3$.ɵlistener("@myAnim.start", function MyAnimDir_animation_myAnim_start_HostBindingHandler($event) { return ctx.onStart(); });
$r3$.ɵlistener("@myAnim.done", function MyAnimDir_animation_myAnim_done_HostBindingHandler($event) { return ctx.onDone(); });
} if (rf & 2) {
$r3$.ɵcomponentHostSyntheticProperty(elIndex, "@myAnim", $r3$.ɵbind(ctx.myAnimState), null, true);
}
}
…
});
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
});
describe('[style] and [style.prop]', () => {