feat(common): expose component instance in NgComponentOutlet (#58698)

crisbeto · AndrewKushnir · commit e4c50b3bea22 · 2024-11-20T08:08:21.000-08:00
Exposes the current instance of the component in the `NgComponentOutlet` directive. PR Close #58698
diff --git a/goldens/public-api/common/index.api.md b/goldens/public-api/common/index.api.md
@@ -490,9 +490,9 @@ export class NgClass implements DoCheck {
 }
 
 // @public
-export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
+export class NgComponentOutlet<T = any> implements OnChanges, DoCheck, OnDestroy {
     constructor(_viewContainerRef: ViewContainerRef);
-    // (undocumented)
+    get componentInstance(): T | null;
     ngComponentOutlet: Type<any> | null;
     // (undocumented)
     ngComponentOutletContent?: any[][];
@@ -511,9 +511,9 @@ export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInputs": { "alias": "ngComponentOutletInputs"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet<any>, "[ngComponentOutlet]", ["ngComponentOutlet"], { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInputs": { "alias": "ngComponentOutletInputs"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet<any>, never>;
 }
 
 // @public
diff --git a/packages/common/src/directives/ng_component_outlet.ts b/packages/common/src/directives/ng_component_outlet.ts
@@ -93,9 +93,12 @@ import {
  */
 @Directive({
   selector: '[ngComponentOutlet]',
-  standalone: true,
+  exportAs: 'ngComponentOutlet',
 })
-export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
+export class NgComponentOutlet<T = any> implements OnChanges, DoCheck, OnDestroy {
+  // TODO(crisbeto): this should be `Type<T>`, but doing so broke a few
+  // targets in a TGP so we need to do it in a major version.
+  /** Component that should be rendered in the outlet. */
   @Input() ngComponentOutlet: Type<any> | null = null;
 
   @Input() ngComponentOutletInputs?: Record<string, unknown>;
@@ -108,7 +111,7 @@ export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
    */
   @Input() ngComponentOutletNgModuleFactory?: NgModuleFactory<any>;
 
-  private _componentRef: ComponentRef<any> | undefined;
+  private _componentRef: ComponentRef<T> | undefined;
   private _moduleRef: NgModuleRef<any> | undefined;
 
   /**
@@ -118,6 +121,14 @@ export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
    */
   private _inputsUsed = new Map<string, boolean>();
 
+  /**
+   * Gets the instance of the currently-rendered component.
+   * Will be null if no component has been rendered.
+   */
+  get componentInstance(): T | null {
+    return this._componentRef?.instance ?? null;
+  }
+
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
   private _needToReCreateNgModuleInstance(changes: SimpleChanges): boolean {
diff --git a/packages/common/test/directives/ng_component_outlet_spec.ts b/packages/common/test/directives/ng_component_outlet_spec.ts
@@ -304,6 +304,19 @@ describe('insert/remove', () => {
 
     expect(fixture.nativeElement.textContent).toBe('Hello World');
   });
+
+  it('should be able to get the current component instance', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    const outlet = fixture.componentInstance.ngComponentOutlet!;
+
+    expect(outlet.componentInstance).toBeNull();
+
+    fixture.componentInstance.currentComponent = InjectedComponent;
+    fixture.detectChanges();
+
+    expect(outlet.componentInstance).toBeInstanceOf(InjectedComponent);
+  });
 });
 
 describe('inputs', () => {
