wip

Context: angular/components#25212
crisbeto · Jul 20, 2022 · 92d13e9 · 92d13e9
1 parent 557cf7d
commit 92d13e9
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts
@@ -26,8 +26,8 @@ import {destroyLView, detachView, renderDetachView} from './node_manipulation';
 // the multiple @extends by making the annotation @implements instead
 export interface viewEngine_ChangeDetectorRef_interface extends viewEngine_ChangeDetectorRef {}
 
-export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_InternalViewRef,
-                                   viewEngine_ChangeDetectorRef_interface {
+export class ViewRef<T> extends viewEngine_EmbeddedViewRef<T> implements
+    viewEngine_InternalViewRef, viewEngine_ChangeDetectorRef_interface {
   private _appRef: ViewRefTracker|null = null;
   private _attachedToViewContainer = false;
 
@@ -57,7 +57,9 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
        *
        * This may be different from `_lView` if the `_cdRefInjectingView` is an embedded view.
        */
-      private _cdRefInjectingView?: LView) {}
+      private _cdRefInjectingView?: LView) {
+    super();
+  }
 
   get context(): T {
     return this._lView[CONTEXT] as unknown as T;

diff --git a/packages/core/test/acceptance/view_container_ref_spec.ts b/packages/core/test/acceptance/view_container_ref_spec.ts
@@ -8,7 +8,7 @@
 
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {computeMsgId} from '@angular/compiler';
-import {ChangeDetectorRef, Compiler, Component, ComponentFactoryResolver, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, Renderer2, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
+import {ChangeDetectorRef, Compiler, Component, ComponentFactoryResolver, ComponentRef, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, Renderer2, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {ComponentFixture, TestBed, TestComponentRenderer} from '@angular/core/testing';
 import {clearTranslations, loadTranslations} from '@angular/localize';
@@ -1226,6 +1226,20 @@ describe('ViewContainerRef', () => {
           .toEqual(
               '<child vcref="">**A**</child><child>**C**</child><child>**C**</child><child>**B**</child>');
     });
+
+    it('should return an EmbeddedViewRef instance', () => {
+      @Component({template: `<ng-template vcref #tplRef [tplRef]="tplRef"></ng-template>`})
+      class TestComponent {
+        @ViewChild(VCRefDirective, {static: true}) vcRef!: VCRefDirective;
+      }
+
+      TestBed.configureTestingModule({declarations: [TestComponent, VCRefDirective]});
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      const ref = fixture.componentInstance.vcRef.createView('');
+
+      expect(ref instanceof EmbeddedViewRef).toBe(true);
+    });
   });
 
   describe('createComponent', () => {
@@ -1688,6 +1702,24 @@ describe('ViewContainerRef', () => {
         });
       });
     });
+
+    it('should return an instance of ComponentRef', () => {
+      @Component({selector: 'app', template: ''})
+      class App {
+        constructor(public viewContainerRef: ViewContainerRef, public injector: Injector) {}
+      }
+
+      @Component({template: ''})
+      class Child {
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Child]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const ref = fixture.componentInstance.viewContainerRef.createComponent(Child);
+
+      expect(ref instanceof ComponentRef).toBe(true);
+    });
   });
 
   describe('insertion points and declaration points', () => {