@angular/core#ComponentRef TypeScript Examples

/**
     * Dynamically load a component from its type. The component's inputs and outputs will be initialized
     * by calling {@link #bindComponent}.
     *
     * @param options The options containing the component to load and its inputs and outputs
     * @param viewContainerRef Specifies where the loaded component should be attached. If not specified then the
     * loaded component is inserted before the application component
     * @param injector Overrides the injector to use as the parent for the component. By default this will be
     * the injector held on the `viewContainerRef`
     */
    loadComponent<T>(options: LoadComponentOptions, viewContainerRef?: ViewContainerRef, injector?: Injector): LoadedComponent {
        let componentRef: ComponentRef<T>;
        let factory = this.factories.get(options.component);
        if (!factory) {
            factory = this.componentFactoryResolver.resolveComponentFactory(options.component);
        }
        if (!viewContainerRef) {
            const appElement: Element = this.applicationRef.components[0].location.nativeElement;
            const injector1 = this.applicationRef.components[0].injector;
            componentRef = factory.create(injector1, [[appElement]]);
            this.applicationRef.attachView(componentRef.hostView);
            if (appElement.parentElement) {
                appElement.parentElement.insertBefore(componentRef.location.nativeElement, appElement.nextSibling);
            }
        }
        else {
            if (!injector) {
                injector = viewContainerRef.injector;
            }
            const index = !Utils.isEmpty(options.index) ? options.index : undefined;
            componentRef = viewContainerRef.createComponent(factory, index, injector, []);
        }
        const loadedComponent: LoadedComponent = {
            componentRef
        };
        this._bindComponent(options, loadedComponent, true);
        loadedComponent.componentRef.changeDetectorRef.detectChanges();
        return loadedComponent;
    }

// 这么做完全是为了演示CDK portal的简单用法
  initComponent(ref: CdkPortalOutletAttachedRef): void {
    if (ref instanceof ComponentRef) {
      if (ref.instance instanceof StepOneComponent) {
        ref.instance.stepDirection = this.stepDirection;
        ref.instance.next.subscribe(() => {
          this.currentStep = this.currentStep + 1;
          ref.destroy();
          this.goStep(1);
        });
      }
      if (ref.instance instanceof StepTwoComponent) {
        ref.instance.previous.subscribe(() => {
          this.currentStep = this.currentStep - 1;
          ref.destroy();
          this.goStep(0);
        });
        ref.instance.next.subscribe(() => {
          this.currentStep = this.currentStep + 1;
          ref.destroy();
          this.goStep(2);
        });
      }
      if (ref.instance instanceof StepThreeComponent) {
        ref.instance.stepDirection = this.stepDirection;
        ref.instance.next.subscribe(() => {
          this.currentStep = 1;
          ref.destroy();
          this.goStep(0);
        });
      }
    }
  }

@HostListener("click")
  show(): void {
    if (this.overlayRef.hasAttached()) {
      this._close();
      return;
    }
    const menubarPortal = new ComponentPortal(NpMenubarComponent);
    const menubarRef: ComponentRef<NpMenubarComponent> = this.overlayRef.attach(
      menubarPortal
    );
    menubarRef.instance.items = this.items;
    menubarRef.instance.styleClass = this.styleClass;
    menubarRef.instance.inputId = this.inputId;
    menubarRef.instance.onClickMenuItem = this.onClickMenuItem;
  }

_open(): void {
    const popoverPortal = new ComponentPortal(NpPopoverComponent);
    const popoverRef: ComponentRef<NpPopoverComponent> = this.overlayRef.attach(
      popoverPortal
    );
    popoverRef.instance.header = this.header;
    popoverRef.instance.body = this.body;
    popoverRef.instance.context = this.context;
    popoverRef.instance.width = this.width;
    popoverRef.instance.styleClass = this.styleClass;
    this.onOpen.emit();
  }

_show(): void {
    const tooltipPortal = new ComponentPortal(NpTooltipComponent);
    const tooltipRef: ComponentRef<NpTooltipComponent> = this.overlayRef.attach(
      tooltipPortal
    );
    tooltipRef.instance.tooltip = this.text;
    tooltipRef.instance.context = this.context;
    tooltipRef.instance.width = this.width;
    tooltipRef.instance.styleClass = this.styleClass;
  }

protected initComponentRef(config: Config): ComponentRef<Component> {
    const portalHost = new DomPortalOutlet(
      this.wrapperInstance.elementRef.nativeElement,
      this.cfr,
      this.applicationRef,
      this.injector,
    );
    const componentRef = portalHost.attachComponentPortal(
      new ComponentPortal(this.componentClass),
    );
    componentRef.instance.setConfig(config);
    return componentRef;
  }

@HostListener('mouseenter')
	show() {
		// Create tooltip portal
		const tooltipPortal = new ComponentPortal(ImageTooltipComponent);

		// Attach tooltip portal to overlay
		const tooltipRef: ComponentRef<ImageTooltipComponent> = this.overlayRef.attach(tooltipPortal);

		// Pass content to tooltip component instance
		tooltipRef.instance.imageUrl = this.imageurl;
	}

/*private setTitle(title: string) {
        document.title = this.intlService.formatMessage(title);
    }*/

    appInit(appComponentRef: ComponentRef<any>) {
        //this.setTitle();
        //Utils.subscribe(this.intlService.events,
        //    (value) => {
        //        this.setTitle();
        //    });

        // See https://github.com/angular/angular/issues/18817
        /*this.resizeEvent.subscribe(
            (event) => {
                appComponentRef.changeDetectorRef.markForCheck();
            });*/

        // this.loadComponent({component: DirtyChecker});
    }

createPanel(
    attachTo: string | undefined,
    overlayClassName: string | undefined
  ): ComponentRef<PanelComponent> {
    if (this.componentRef != undefined) {
      this.removePanel();
    }
    const factory: ComponentFactory<PanelComponent> =
      this.resolver.resolveComponentFactory(PanelComponent);

    this.componentRef = factory.create(this.injector);
    this.applicationRef.attachView(this.componentRef.hostView);
    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    this.overlay = document.createElement("div");
    this.overlay.id = "ngx-colors-overlay";
    this.overlay.classList.add("ngx-colors-overlay");
    this.overlay.classList.add(overlayClassName);
    Object.keys(OVERLAY_STYLES).forEach((attr: string) => {
      this.overlay.style[attr] = OVERLAY_STYLES[attr];
    });
    if (attachTo) {
      document.getElementById(attachTo).appendChild(this.overlay);
    } else {
      document.body.appendChild(this.overlay);
    }
    this.overlay.appendChild(domElem);

    return this.componentRef;
  }

protected linkNgComponentWithPage(
    mpComponentInstance: MiniProgramComponentInstance,
    componentRef: ComponentRef<unknown>,
    ngModuleRef: NgModuleRef<unknown>
  ) {
    mpComponentInstance.__isLink = true;
    mpComponentInstance.__ngComponentHostView = componentRef.hostView;
    mpComponentInstance.__ngComponentInstance = componentRef.instance;
    mpComponentInstance.__ngComponentInjector = componentRef.injector;
    const ngZone = componentRef.injector.get(NgZone);
    mpComponentInstance.__ngZone = ngZone;
    const { lView, id }: { lView: LView; id: number } =
      findPageLView(componentRef);
    setLViewPath(lView, [id]);
    mpComponentInstance.__completePath = [id];
    ngZone.runOutsideAngular(() => {
      const initValue = getPageRefreshContext(lView);
      mpComponentInstance.setData(initValue);
    });
    lViewLinkToMPComponentRef(mpComponentInstance, lView);
    mpComponentInstance.__lView = lView;
    mpComponentInstance.__ngDestroy = () => {
      ngModuleRef.destroy();
      componentRef.destroy();
      removePageLViewLink(id);
      cleanAll(lView);
    };
  }

insertComponentSubscription: Subscription = this.insertComponent$.asObservable()
    .pipe(take(1))
    .pipe(delay(50)) // TODO: This is a hack to avoid doing the check of the view, let's change this in the future
    .subscribe(async () => {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.childComponent);
      const component: ComponentRef<any> = this.modalContentContainer.createComponent(componentFactory);

      if (this.childComponentInputs) {
        for (const componentInput of this.childComponentInputs) {
          component.instance[componentInput.input] = componentInput.value;
        }
      }

      this.createdComponent$.next(component);
      this.showModal$.next(true);
    });

async createOnBody<T = any>(component: Type<T>): Promise<{
    component: ComponentRef<T>;
    open: () => void;
    close: () => Promise<any>,
    destroyed$: ReplaySubject<void>
  }> {
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    const responseObject = {
      destroyed$: new ReplaySubject<void>(),
      close: () => {
        return new Promise(resolve => {
          this.ngZone.run(() => {
            this.appRef.detachView(componentRef.hostView);
            componentRef.onDestroy(() => {
              responseObject.destroyed$.next();
              responseObject.destroyed$.complete();
              resolve(true);
            });
            componentRef.destroy();
          });
        });
      },
      open: () => {
        this.ngZone.run(() => {
          this.appRef.attachView(componentRef.hostView);

          const rootNode = (componentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

          this.renderer.appendChild(this.document.body, rootNode);
        });
      },
      component: componentRef,
    };

    return responseObject;
  }

createComponent<T>(type: Type<T>): ComponentRef<T> {
        const componentFactory = this.componentFactory.resolveComponentFactory(type);
        return this.viewContainerRef.createComponent<T>(componentFactory);
    }

rowComponentRef: ComponentRef<any>;

rowComponentRef: ComponentRef<any>;

// Todo: In the future maybe we could make this dinamyc IE use multiple kinds of loading
  loadingComponentRef!: ComponentRef<PulseLoadingComponent>;

/**
     * Used to emit events when the component is created and destroyed
     */
    @Output("sqLoadComponent") eventEmitter = new EventEmitter<{componentRef: ComponentRef<Type<any>> | undefined}>();

blockCardComponentRef: ComponentRef<SlateBlockCardComponent>;

componentRef: ComponentRef<K>;

export function findPageLView(componentRef: ComponentRef<unknown>) {
  const lView = findCurrentComponentLView(componentRef.instance);
  const id = lViewRegistryMap.get(lView)!;
  lViewRegistryMap.delete(lView);
  pageRegistryMap.set(id, lView);
  return { lView: lView as any, id: id };
}

private componentRef: ComponentRef<any>;

private componentRef: ComponentRef<NotificationComponent>;

// DynControl
  private component!: ComponentRef<AbstractDynControl>;

/** Reference to the component instantiated in popup mode. */
  private _popupComponentRef: ComponentRef<NgxMatDatetimeContent<D>> | null;

panelRef: ComponentRef<PanelComponent>;

componentRef: ComponentRef<PanelComponent>;

/**
   * Dynamically created component
   */
  private _component: ComponentRef<MappedComponentProperties>;

attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
    if (this.portalOutlet.hasAttached()) {
      throwDialogContentAlreadyAttachedError();
    }
    this.blurActiveElement();
    return this.portalOutlet.attachComponentPortal(portal);
  }

private drawerRef: ComponentRef<DrawerComponent>;