diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index ee840613ab..d2fc45b4eb 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -2517,7 +2517,7 @@ export function checkNoChangesInRootView(lView: LView): void { } /** Checks the view of the component provided. Does not gate on dirty checks or execute doCheck. */ -function detectChangesInternal(hostView: LView, component: T, rf: RenderFlags | null) { +export function detectChangesInternal(hostView: LView, component: T, rf: RenderFlags | null) { const hostTView = hostView[TVIEW]; const oldView = enterView(hostView, hostView[HOST_NODE]); const templateFn = hostTView.template !; diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts index fc6c07161c..096aa0c43b 100644 --- a/packages/core/src/render3/view_ref.ts +++ b/packages/core/src/render3/view_ref.ts @@ -11,7 +11,7 @@ import {ChangeDetectorRef as viewEngine_ChangeDetectorRef} from '../change_detec import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_container_ref'; import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, InternalViewRef as viewEngine_InternalViewRef} from '../linker/view_ref'; -import {checkNoChanges, checkNoChangesInRootView, detectChanges, detectChangesInRootView, markViewDirty, storeCleanupFn, viewAttached} from './instructions'; +import {checkNoChanges, checkNoChangesInRootView, detectChangesInRootView, detectChangesInternal, markViewDirty, storeCleanupFn, viewAttached} from './instructions'; import {TNode, TNodeType, TViewNode} from './interfaces/node'; import {FLAGS, HOST, HOST_NODE, LView, LViewFlags, PARENT, RENDERER_FACTORY} from './interfaces/view'; import {destroyLView} from './node_manipulation'; @@ -244,7 +244,7 @@ export class ViewRef implements viewEngine_EmbeddedViewRef, viewEngine_Int if (rendererFactory.begin) { rendererFactory.begin(); } - detectChanges(this.context); + detectChangesInternal(this._lView, this.context, null); if (rendererFactory.end) { rendererFactory.end(); } diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts index 57730b61d7..05c7c9a61e 100644 --- a/packages/core/test/render3/change_detection_spec.ts +++ b/packages/core/test/render3/change_detection_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {TemplateRef, ViewContainerRef} from '@angular/core'; +import {EmbeddedViewRef, TemplateRef, ViewContainerRef} from '@angular/core'; import {withBody} from '@angular/private/testing'; import {ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, RendererType2} from '../../src/core'; @@ -91,13 +91,22 @@ describe('change detection', () => { it('should support detectChanges on components that have LContainers', () => { let structuralComp !: StructuralComp; + function FooTemplate(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + text(0); + } + if (rf & RenderFlags.Update) { + textBinding(0, bind(ctx.value)); + } + } + class StructuralComp { tmp !: TemplateRef; value = 'one'; constructor(public vcr: ViewContainerRef) {} - create() { this.vcr.createEmbeddedView(this.tmp); } + create() { return this.vcr.createEmbeddedView(this.tmp, this); } static ngComponentDef = defineComponent({ type: StructuralComp, @@ -107,32 +116,17 @@ describe('change detection', () => { inputs: {tmp: 'tmp'}, consts: 1, vars: 1, - template: (rf: RenderFlags, ctx: StructuralComp) => { - if (rf & RenderFlags.Create) { - text(0); - } - if (rf & RenderFlags.Update) { - textBinding(0, bind(ctx.value)); - } - } + template: FooTemplate }); } - function FooTemplate(rf: RenderFlags, ctx: any) { - if (rf & RenderFlags.Create) { - text(0, 'Temp content'); - } - } - /** - * - * Temp content - * + * {{ value }} * */ const App = createComponent('app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - template(0, FooTemplate, 1, 0, '', null, ['foo', ''], templateRefExtractor); + template(0, FooTemplate, 2, 1, '', null, ['foo', ''], templateRefExtractor); element(2, 'structural-comp'); } if (rf & RenderFlags.Update) { @@ -145,13 +139,19 @@ describe('change detection', () => { fixture.update(); expect(fixture.html).toEqual('one'); - structuralComp.create(); + const viewRef: EmbeddedViewRef = structuralComp.create(); fixture.update(); - expect(fixture.html).toEqual('oneTemp content'); + expect(fixture.html).toEqual('oneone'); + // check embedded view update structuralComp.value = 'two'; - detectChanges(structuralComp); - expect(fixture.html).toEqual('twoTemp content'); + viewRef.detectChanges(); + expect(fixture.html).toEqual('onetwo'); + + // check root view update + structuralComp.value = 'three'; + fixture.update(); + expect(fixture.html).toEqual('threethree'); }); });