TypeScript ApplicationRef.attachView方法代碼示例

  open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): DrawerRef {
    const containerSelector = options.container || 'body';
    const containerEl = document.querySelector(containerSelector);

    if (!containerEl) {
      throw new Error(`The specified drawer container "${containerSelector}" was not found in the DOM.`);
    }

    const activeDrawer = new ActiveDrawer();
    const contentRef = this._getContentRef(moduleCFR, contentInjector, content, activeDrawer);

    let drawerCmptRef: ComponentRef<DrawerComponent>;
    let backdropCmptRef: ComponentRef<DrawerBackdropComponent>;
    let drawerRef: DrawerRef;

    if (options.backdrop !== false) {
      backdropCmptRef = this._backdropFactory.create(this._injector);
      this._applicationRef.attachView(backdropCmptRef.hostView);
      containerEl.appendChild(backdropCmptRef.location.nativeElement);
    }
    drawerCmptRef = this._drawerFactory.create(this._injector, contentRef.nodes);
    this._applicationRef.attachView(drawerCmptRef.hostView);
    containerEl.appendChild(drawerCmptRef.location.nativeElement);

    drawerRef = new DrawerRef(drawerCmptRef, contentRef, backdropCmptRef);

    activeDrawer.close = (result: any) => { drawerRef.close(result); };
    activeDrawer.dismiss = (reason: any) => { drawerRef.dismiss(reason); };

    this.applyDrawerOptions(drawerCmptRef.instance, options);

    return drawerRef;
  }

  open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): NgbModalRef {
    const containerSelector = options.container || 'body';
    const containerEl = document.querySelector(containerSelector);

    if (!containerEl) {
      throw new Error(`The specified modal container "${containerSelector}" was not found in the DOM.`);
    }

    const activeModal = new NgbActiveModal();
    const contentRef = this._getContentRef(moduleCFR, contentInjector, content, activeModal);

    let windowCmptRef: ComponentRef<NgbModalWindow>;
    let backdropCmptRef: ComponentRef<NgbModalBackdrop>;
    let ngbModalRef: NgbModalRef;


    if (options.backdrop !== false) {
      backdropCmptRef = this._backdropFactory.create(this._injector);
      this._applicationRef.attachView(backdropCmptRef.hostView);
      containerEl.appendChild(backdropCmptRef.location.nativeElement);
    }
    windowCmptRef = this._windowFactory.create(this._injector, contentRef.nodes);
    this._applicationRef.attachView(windowCmptRef.hostView);
    containerEl.appendChild(windowCmptRef.location.nativeElement);

    ngbModalRef = new NgbModalRef(windowCmptRef, contentRef, backdropCmptRef);

    activeModal.close = (result: any) => { ngbModalRef.close(result); };
    activeModal.dismiss = (reason: any) => { ngbModalRef.dismiss(reason); };

    this._applyWindowOptions(windowCmptRef.instance, options);

    return ngbModalRef;
  }

        return new Promise((resolve, reject) => {
            const location = this.getRootViewContainerNode();
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(dialogType);
            const componentRef = componentFactory.create(this.injector);
            const componentRootNode = this.getComponentRootNode(componentRef);

            this.applicationRef.attachView(componentRef.hostView);
            componentRef.onDestroy(() => {
                this.applicationRef.detachView(componentRef.hostView);
            });

            location.appendChild(componentRootNode);

            const instance = componentRef.instance as DynamicDialog;
            instance.nativeElement = componentRootNode;
            instance.options = options;
            instance.closed.subscribe(() => {
                componentRef.destroy();
            });
            instance.confirm.subscribe((value: any) => {
                resolve(value);
            }, (error: any) => {
                reject(error);
            });
            instance.cancel.subscribe(() => {
                if (onCancel) {
                    onCancel();
                }
            });
        });

  /**
   * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
   * @param portal Portal to be attached
   */
  attachComponentPortal<T>(portal: ComponentPortal<T>, newestOnTop: boolean): ComponentRef<T> {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
    let componentRef: ComponentRef<T>;

    // If the portal specifies a ViewContainerRef, we will use that as the attachment point
    // for the component (in terms of Angular's component tree, not rendering).
    // When the ViewContainerRef is missing, we use the factory to create the component directly
    // and then manually attach the ChangeDetector for that component to the application (which
    // happens automatically when using a ViewContainer).
    componentRef = componentFactory.create(portal.injector);

    // When creating a component outside of a ViewContainer, we need to manually register
    // its ChangeDetector with the application. This API is unfortunately not yet published
    // in Angular core. The change detector must also be deregistered when the component
    // is destroyed to prevent memory leaks.
    this._appRef.attachView(componentRef.hostView);

    this.setDisposeFn(() => {
      this._appRef.detachView(componentRef.hostView);
      componentRef.destroy();
    });

    // At this point the component has been instantiated, so we move it to the location in the DOM
    // where we want it to be rendered.
    if (newestOnTop) {
      this._hostDomElement.insertBefore(this._getComponentRootNode(componentRef), this._hostDomElement.firstChild);
    } else {
      this._hostDomElement.appendChild(this._getComponentRootNode(componentRef));
    }

    return componentRef;
  }

  /**
   * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
   * @param portal Portal to be attached
   * @returns Reference to the created component.
   */
  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
    let componentRef: ComponentRef<T>;

    // If the portal specifies a ViewContainerRef, we will use that as the attachment point
    // for the component (in terms of Angular's component tree, not rendering).
    // When the ViewContainerRef is missing, we use the factory to create the component directly
    // and then manually attach the view to the application.
    if (portal.viewContainerRef) {
      componentRef = portal.viewContainerRef.createComponent(
          componentFactory,
          portal.viewContainerRef.length,
          portal.injector || portal.viewContainerRef.parentInjector);

      this.setDisposeFn(() => componentRef.destroy());
    } else {
      componentRef = componentFactory.create(portal.injector || this._defaultInjector);
      this._appRef.attachView(componentRef.hostView);
      this.setDisposeFn(() => {
        this._appRef.detachView(componentRef.hostView);
        componentRef.destroy();
      });
    }
    // At this point the component has been instantiated, so we move it to the location in the DOM
    // where we want it to be rendered.
    this.outletElement.appendChild(this._getComponentRootNode(componentRef));

    return componentRef;
  }

    private initPopup({data, coord, component, onCloseCallback}: IPopupParam): void {
        this.componentRef = this.componentFactoryResolver.resolveComponentFactory<DynamicPopup>(component).create(this.injector);
        const popupComponent = this.componentRef.instance;
        const domElem = (this.componentRef.hostView as EmbeddedViewRef<DynamicPopup>).rootNodes[0] as HTMLElement;

        this.bindInputProps(popupComponent, data, coord);
        this.bindOutputProps(popupComponent, domElem, onCloseCallback);
        this.renderer.addClass(domElem, 'popup');
        this.renderer.appendChild((this.appRef.components[0].location).nativeElement, domElem);
        this.appRef.attachView(this.componentRef.hostView);
    }

 private _getContentRef(
     moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
     context: NgbActiveModal): ContentRef {
   if (!content) {
     return new ContentRef([]);
   } else if (content instanceof TemplateRef) {
     const viewRef = content.createEmbeddedView(context);
     this._applicationRef.attachView(viewRef);
     return new ContentRef([viewRef.rootNodes], viewRef);
   } else if (isString(content)) {
     return new ContentRef([[document.createTextNode(`${content}`)]]);
   } else {
     const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
     const modalContentInjector =
         ReflectiveInjector.resolveAndCreate([{provide: NgbActiveModal, useValue: context}], contentInjector);
     const componentRef = contentCmptFactory.create(modalContentInjector);
     this._applicationRef.attachView(componentRef.hostView);
     return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
   }
 }

 /** 動態構建組件 */
 protected build<T>(component: { new(...args: any[]): T; }): ComponentRef<T> {
     let componentFactory = this.resolver.resolveComponentFactory(component);
     let componentRef = componentFactory.create(this.injector);
     let componentRootNode = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
     this.applicationRef.attachView(componentRef.hostView);
     componentRef.onDestroy(() => {
         this.applicationRef.detachView(componentRef.hostView);
     });
     document.body.appendChild(componentRootNode);
     return componentRef;
 }

 public appendComponentToBody<T>(component: {
   new (...args): T;
 }): ComponentRef<T> {
   const componentRef = this.componentFactoryResolver
     .resolveComponentFactory<T>(component)
     .create(this.injector);
   this.appRef.attachView(componentRef.hostView);
   const domElem = (componentRef.hostView as EmbeddedViewRef<T>)
     .rootNodes[0] as HTMLElement;
   this.appendToDom(domElem);
   return componentRef;
 }

    return this.zone.run(() => {
      const factory = this.componentFactoryResolver.resolveComponentFactory(type);
      const component = factory.create(this.injector);
      this.appRef.attachView(component.hostView);

      if (onCreated) {
        onCreated(component);
      }

      this.tooltipRef = component;
      return (component.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    });