TypeScript core.ComponentFactory類代碼示例

  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;
  }

  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;
  }

 .then((factory:ComponentFactory) => {
     this.placeholder = factory
         .create(this.viewContainer.injector, undefined, this.window.document.body)
         .instance;
 });

    public createComponent() {
        const injector = Injector.create({
            parent: this.parentInjector,
            providers: [
                {
                    provide: EditorNodeViewContext,
                    useValue: new EditorNodeViewContext(this.node, this.view, this.getPos),
                },
            ],
        })

        this.componentRef = this.componentFactory.create(injector, null, this.node, this.ngModule)
    }