TypeScript ViewContainerRef.createComponent方法代碼示例

 ngAfterContentInit() {
   const authFormFactory = this.resolver.resolveComponentFactory(AuthFormComponent);
   this.entry.createComponent(authFormFactory);
   this.component = this.entry.createComponent(authFormFactory, 0);
   this.component.instance.title = 'Create account';
   this.component.instance.submitted.subscribe(this.loginUser);
 }

  @Input() set ifLoader(loading: boolean) {
    console.log('ifLoader, loading : ', loading);

    if (loading) {
      // create and attach a loader to our viewContainer
      const factory = this.cfResolver.resolveComponentFactory(LoaderSpinnerComponent);
      this.loaderComponentRef = this.viewContainer.createComponent(factory);

      // remove any embedded view
      if (this.embeddedViewRef) {
        this.embeddedViewRef.destroy();
        this.embeddedViewRef = null;
      }
    } else {

      // remove any loader
      if (this.loaderComponentRef) {
        this.loaderComponentRef.destroy();
        this.loaderComponentRef = null;
      }

      // create and attach our embeddedView
      this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

 loadComponent() {
   this.entry.clear();
   const className = this.getComponentName(this.contact.type);
   const componentFactory = this.componentFactoryResolver.resolveComponentFactory(contacts[className]);
   this.componentRef = this.entry.createComponent(componentFactory, this.entry.length, null);
   (this.componentRef.instance).contact = this.contact;
 }

  ionViewPreLoad() {
    const component = this._navParams.data.component;
    if (!component) {
      console.warn('modal\'s page was not defined');
      return;
    }

    let cfr = this.moduleLoader.getComponentFactoryResolver(component);
    if (!cfr) {
      cfr = this._cfr;
    }
    const componentFactory = cfr.resolveComponentFactory(component);

    // ******** DOM WRITE ****************
    const componentRef = this._viewport.createComponent(componentFactory, this._viewport.length, this._viewport.parentInjector, []);

    this._setCssClass(componentRef, 'ion-page');
    this._setCssClass(componentRef, 'show-page');

    // Change the viewcontroller's instance to point the user provided page
    // Lifecycle events will be sent to the new instance, instead of the modal's component
    // we need to manually subscribe to them
    this._viewCtrl._setInstance(componentRef.instance);
    this._viewCtrl.willEnter.subscribe(this._viewWillEnter.bind(this));
    this._viewCtrl.didLeave.subscribe(this._viewDidLeave.bind(this));

    this._enabled = true;
  }

 this.api.getProfile().subscribe((data: any)=>{
   console.log(data)
   if(data.signedOut){
     const factory = this.resolver.resolveComponentFactory(SignupComponent)
     this.componentRef = this.entry.createComponent(factory)
   } else{
     if(data.username == null){
       const factory = this.resolver.resolveComponentFactory(CreateusernameComponent)
       this.componentRef = this.entry.createComponent(factory)
     } else{
       this.api.changeUserData(data)
       const factory = this.resolver.resolveComponentFactory(HomePageComponent)
       this.componentRef = this.entry.createComponent(factory)
     }
   }
 })

    public start(viewContainerRef: ViewContainerRef) {           
        let spinnerRef: any;

        const factory = this.resolver.resolveComponentFactory(SpinnerComponent);

        if (viewContainerRef) {
            spinnerRef = viewContainerRef.createComponent(factory);
            //spinnerRef = this.componentLoader.loadNextToLocation(SpinnerComponent, viewContainerRef);
        }
        else {
            spinnerRef = this._viewContainerRef.createComponent(factory);
            //spinnerRef = this.componentLoader.loadNextToLocation(SpinnerComponent, this._viewContainerRef);
        }

        return spinnerRef;
    }

  private buildControl(controlConfig: ControlConfig): void {
    const factory = this.cfr.resolveComponentFactory(DynamicControlComponent);
    const control = this.formContainer.createComponent(factory);

    control.instance.controlConfig = controlConfig;
    control.instance.formGroup = this.form;
  }

  public open(modalInstance: SkyModalInstance, component: any, providers?: any[]) {
    let factory = this.resolver.resolveComponentFactory(component);
    let hostService = new SkyModalHostService();

    providers = providers || [];

    providers.push({
      provide: SkyModalHostService,
      useValue: hostService
    });

    let resolvedProviders = ReflectiveInjector.resolve(providers);

    let injector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);

    let modalComponentRef = this.target.createComponent(factory, undefined, injector);

    modalInstance.componentInstance = modalComponentRef.instance;

    function closeModal() {
      hostService.destroy();
      modalComponentRef.destroy();
    }

    hostService.close.subscribe((modalComponent: SkyModalComponent) => {
      closeModal();
    });

    modalInstance.setCloseCallback(() => {
      closeModal();
    });
  }

    public ngOnInit() {
        // dynamic template built (TODO driven by some incoming settings)        

        // now we get built component, just to load it
        let dynamicComponent = this.customComponentBuilder
            .CreateComponent(this.template);

        // we have a component and its target
        let factory = this.componentResolver
            .resolveComponentFactory<IHaveDynamicData>(dynamicComponent);

        // console.log('creating compoent with template: ' + this.template);

        // Instantiates a single {@link Component} and inserts its Host View 
        //   into this container at the specified `index`
        let comp = this.dynamicComponentTarget.createComponent(factory, 0);

        // and here we have access to our dynamic component
        this.component = comp.instance;
        this.previousTemplate = this.template;

        this.component.title = this.title;
        this.component.entity = this.entity;

    }

 public createComponent<T>(componentType: { new(...args: any[]): T; }): ComponentRef<T> {
     // used to cache the factory, but this a) caused issues when used with either webpack/angularcli with --prod
     // but more significantly, the underlying implementation of resolveComponentFactory uses a map too, so us
     // caching the factory here yields no performance benefits
     let factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
     return this.viewContainerRef.createComponent(factory);
 }