TypeScript core.ViewContainerRef類代碼示例

  /**
   * Creates an instance of a Component and attaches it to the View Container found at the
   * `location` specified as {@link ViewContainerRef}.
   *
   * You can optionally provide `providers` to configure the {@link Injector} provisioned for this
   * Component Instance.
   *
   * Returns {@link ComponentRef} representing the newly created Component.
   * @param ComponentClass - @Component class
   * @param location - reference to the location
   * @param providers - optional array of providers
   * @returns {ComponentRef<T>} - returns ComponentRef<T>
   */
  public appendNextToLocation<T>(ComponentClass:Type<T>,
                                 location:ViewContainerRef,
                                 providers?:ResolvedReflectiveProvider[]):ComponentRef<T> {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
    let parentInjector = location.parentInjector;
    let childInjector: Injector = parentInjector;
    if (providers && providers.length > 0) {
      childInjector = ReflectiveInjector.fromResolvedProviders(providers, parentInjector);
    }

    return location.createComponent(componentFactory, location.length, childInjector);
  }

export function createComponent(cfr: ComponentFactoryResolver,
                                        type: any,
                                        vcr: ViewContainerRef,
                                        bindings: ResolvedReflectiveProvider[],
                                        projectableNodes?: any[][]): ComponentRef<any> {
  return vcr.createComponent(
    cfr.resolveComponentFactory(type),
    vcr.length,
    getInjector(vcr, bindings),
    projectableNodes
  );
}

 this._pageService.get_page_by_survey(this.current_survey.survey_id).subscribe(data=>{
   this.lstPage = data.Data;
   this.current_page = this.lstPage.filter(x=>x.page_id == page_id)[0];
   this.questionContainer.clear();
   this.loadByPage();
   if(data.TotalRows%2 ==0){
     $(".pagings").css("background-color","#0683c9")
   }else{
     $(".pagings").css("background-color","#85d2fc")
   }
 });

      this._resolver.resolveComponent(page).then(factory => {
        const pageComponentRef = this._viewContainer.createComponent(factory, 0, injector);
        const pageElement = pageComponentRef.location.nativeElement;

        this.element.appendChild(pageElement); // dirty fix to insert in correct position

        done({
          element: pageElement,
          unload: () => pageComponentRef.destroy()
        });
      });

  /**
   * Attach the given TemplatePortal to this PortlHost as an embedded View.
   * @param portal Portal to be attached.
   */
  attachTemplatePortal(portal: TemplatePortal): Map<string, any> {
    portal.setAttachedHost(this);

    this._viewContainerRef.createEmbeddedView(portal.templateRef);
    super.setDisposeFn(() => this._viewContainerRef.clear());

    this._portal = portal;

    // TODO(jelbourn): return locals from view
    return new Map<string, any>();
  }

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

                // and here we have access to our dynamic component
                let component: IHaveDynamicData = dynamicComponent.instance;

                component.name = "The name passed to component as a value";
                component.entity = this.entity;
            });

      .then(factory => {
        // Create Injector for Component
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);

        // Create Component with factory and injector. 0 = index which determines where in the
        // container the component will be rendered. 0 means it will be rendered starting at the
        // beginning
        const componentRef = this.vcRef.createComponent(factory, 0, injector, []);

        // Define any parameters you want to pass to the newly generated component
        componentRef.instance.item = this.item;
      });

 ngOnInit() {
   if (!components[this.config.type]) {
     const supportedTypes = Object.keys(components).join(', ');
     throw new Error(`Trying to use an unsupported type (${this.config.type}).
       Supported types: ${supportedTypes}`);
   }
   const component = this.resolver.resolveComponentFactory<Field>(components[this.config.type]);
   this.component = this.container.createComponent(component);
   this.component.instance.config = this.config;
   this.component.instance.group = this.group;
   this.component.instance.fieldShow = this.fieldShow;
 }

  _update() {
    if (this._currentValue) {
      if (!this._viewRef) {
        this._viewContainerRef.clear();
        this._elseViewRef = void 0;

        if (this._templateRef) {
          this._viewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
        }
      }
    } else {
      if (!this._elseViewRef) {
        this._viewContainerRef.clear();
        this._viewRef = void 0;

        if (this._elseTemplateRef) {
          this._elseViewRef = this._viewContainerRef.createEmbeddedView(this._elseTemplateRef);
        }
      }
    }
  }

    private loadInLocation(componentType: Type<any>): Promise<ComponentRef<any>> {
        const factory = this.resolver.resolveComponentFactory(componentType);
        const componentRef = this.containerRef.createComponent(
            factory, this.containerRef.length, this.containerRef.parentInjector);

        // Component is created, built may not be checked if we are loading
        // inside component with OnPush CD strategy. Mark us for check to be sure CD will reach us.
        // We are inside a promise here so no need for setTimeout - CD should trigger
        // after the promise.
        log("DetachedLoader.loadInLocation component loaded -> markForCheck");

        return Promise.resolve(componentRef);
    }