From 8efbcc996a0f9582387ee3c78dc1c54d5bed9c51 Mon Sep 17 00:00:00 2001 From: Tobias Bosch Date: Tue, 2 Aug 2016 10:34:41 -0700 Subject: [PATCH] fix(compiler): allow to use pipes inside of `*ngIf` (#10452) Fixes #9746 --- .../integrationtest/src/features.ts | 4 ++ .../integrationtest/src/module.ts | 4 +- .../src/view_compiler/compile_pipe.ts | 37 ++++++------------- .../src/view_compiler/compile_view.ts | 1 - 4 files changed, 17 insertions(+), 29 deletions(-) diff --git a/modules/@angular/compiler-cli/integrationtest/src/features.ts b/modules/@angular/compiler-cli/integrationtest/src/features.ts index 6320393458..5889360517 100644 --- a/modules/@angular/compiler-cli/integrationtest/src/features.ts +++ b/modules/@angular/compiler-cli/integrationtest/src/features.ts @@ -38,6 +38,10 @@ export class CompWithProviders { export class CompWithReferences { } +@Component({selector: 'cmp-pipes', template: `
{{test | somePipe}}
`}) +export class CompUsingPipes { +} + @Component({ selector: 'cmp-custom-els', template: ` diff --git a/modules/@angular/compiler-cli/integrationtest/src/module.ts b/modules/@angular/compiler-cli/integrationtest/src/module.ts index 6deb6c1821..f21a493739 100644 --- a/modules/@angular/compiler-cli/integrationtest/src/module.ts +++ b/modules/@angular/compiler-cli/integrationtest/src/module.ts @@ -13,7 +13,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {AnimateCmp} from './animate'; import {BasicComp} from './basic'; import {CompWithAnalyzeEntryComponentsProvider, CompWithEntryComponents} from './entry_components'; -import {CompWithProviders, CompWithReferences, ModuleUsingCustomElements} from './features'; +import {CompUsingPipes, CompWithProviders, CompWithReferences, ModuleUsingCustomElements} from './features'; import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomePipeInRootModule, SomeService, someLibModuleWithProviders} from './module_fixtures'; import {ProjectingComp} from './projection'; import {CompWithChildQuery, CompWithDirectiveChild} from './queries'; @@ -23,7 +23,7 @@ import {CompWithChildQuery, CompWithDirectiveChild} from './queries'; SomeDirectiveInRootModule, SomePipeInRootModule, AnimateCmp, BasicComp, CompWithEntryComponents, CompWithAnalyzeEntryComponentsProvider, ProjectingComp, CompWithChildQuery, CompWithDirectiveChild, CompUsingRootModuleDirectiveAndPipe, CompWithProviders, - CompWithReferences + CompWithReferences, CompUsingPipes ], imports: [BrowserModule, FormsModule, someLibModuleWithProviders(), ModuleUsingCustomElements], providers: [SomeService], diff --git a/modules/@angular/compiler/src/view_compiler/compile_pipe.ts b/modules/@angular/compiler/src/view_compiler/compile_pipe.ts index 175bfc83c6..f6866d0dd9 100644 --- a/modules/@angular/compiler/src/view_compiler/compile_pipe.ts +++ b/modules/@angular/compiler/src/view_compiler/compile_pipe.ts @@ -15,10 +15,6 @@ import * as o from '../output/output_ast'; import {CompileView} from './compile_view'; import {createPureProxy, getPropertyInView, injectFromViewParentInjector} from './util'; -class _PurePipeProxy { - constructor(public view: CompileView, public instance: o.ReadPropExpr, public argCount: number) {} -} - export class CompilePipe { static call(view: CompileView, name: string, args: o.Expression[]): o.Expression { var compView = view.componentView; @@ -41,15 +37,10 @@ export class CompilePipe { } instance: o.ReadPropExpr; - private _purePipeProxies: _PurePipeProxy[] = []; + private _purePipeProxyCount = 0; constructor(public view: CompileView, public meta: CompilePipeMetadata) { this.instance = o.THIS_EXPR.prop(`_pipe_${meta.name}_${view.pipeCount++}`); - } - - get pure(): boolean { return this.meta.pure; } - - create(): void { var deps = this.meta.type.diDeps.map((diDep) => { if (diDep.token.equalsTo(identifierToken(Identifiers.ChangeDetectorRef))) { return getPropertyInView(o.THIS_EXPR.prop('ref'), this.view, this.view.componentView); @@ -61,28 +52,22 @@ export class CompilePipe { this.view.createMethod.addStmt(o.THIS_EXPR.prop(this.instance.name) .set(o.importExpr(this.meta.type).instantiate(deps)) .toStmt()); - this._purePipeProxies.forEach((purePipeProxy) => { - var pipeInstanceSeenFromPureProxy = - getPropertyInView(this.instance, purePipeProxy.view, this.view); - createPureProxy( - pipeInstanceSeenFromPureProxy.prop('transform') - .callMethod(o.BuiltinMethod.bind, [pipeInstanceSeenFromPureProxy]), - purePipeProxy.argCount, purePipeProxy.instance, purePipeProxy.view); - }); } + get pure(): boolean { return this.meta.pure; } + private _call(callingView: CompileView, args: o.Expression[]): o.Expression { if (this.meta.pure) { // PurePipeProxies live on the view that called them. - var purePipeProxy = new _PurePipeProxy( - callingView, o.THIS_EXPR.prop(`${this.instance.name}_${this._purePipeProxies.length}`), - args.length); - this._purePipeProxies.push(purePipeProxy); + var purePipeProxyInstance = + o.THIS_EXPR.prop(`${this.instance.name}_${this._purePipeProxyCount++}`); + var pipeInstanceSeenFromPureProxy = getPropertyInView(this.instance, callingView, this.view); + createPureProxy( + pipeInstanceSeenFromPureProxy.prop('transform') + .callMethod(o.BuiltinMethod.bind, [pipeInstanceSeenFromPureProxy]), + args.length, purePipeProxyInstance, callingView); return o.importExpr(Identifiers.castByValue) - .callFn([ - purePipeProxy.instance, - getPropertyInView(this.instance.prop('transform'), callingView, this.view) - ]) + .callFn([purePipeProxyInstance, pipeInstanceSeenFromPureProxy.prop('transform')]) .callFn(args); } else { return getPropertyInView(this.instance, callingView, this.view).callMethod('transform', args); diff --git a/modules/@angular/compiler/src/view_compiler/compile_view.ts b/modules/@angular/compiler/src/view_compiler/compile_view.ts index 1506be51a1..0a46a2f66c 100644 --- a/modules/@angular/compiler/src/view_compiler/compile_view.ts +++ b/modules/@angular/compiler/src/view_compiler/compile_view.ts @@ -191,7 +191,6 @@ export class CompileView implements NameResolver { } afterNodes() { - this.pipes.forEach((pipe) => pipe.create()); this.viewQueries.values().forEach( (queries) => queries.forEach( (query) => query.afterChildren(this.createMethod, this.updateViewQueriesMethod)));