TypeScript ViewContainerRef.remove方法代码示例

  private _removeModalElements() {
    this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._windowCmptRef.hostView));
    if (this._backdropCmptRef) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._backdropCmptRef.hostView));
    }
    if (this._contentRef && this._contentRef.viewRef) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._contentRef.viewRef));
    }

    this._windowCmptRef = null;
    this._backdropCmptRef = null;
    this._contentRef = null;
  }

  ngOnChanges() {
    if (this._viewRef) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
    }

    if (this._templateRef) {
      this._viewRef = this._viewContainerRef.createEmbeddedView(this._templateRef, this._context);
    }
  }

  private createView() {
    if (isPresent(this._viewRef)) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
    }

    if (isPresent(this._templateRef)) {
      this._viewRef = this._viewContainerRef.createEmbeddedView(this._templateRef, this._context);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this._viewRef) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
    }

    if (this.ngTemplateOutlet) {
      this._viewRef = this._viewContainerRef.createEmbeddedView(
          this.ngTemplateOutlet, this.ngTemplateOutletContext);
    }
  }

  @Input()
  set ngTemplateOutlet(templateRef: TemplateRef<Object>) {
    if (isPresent(this._insertedViewRef)) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._insertedViewRef));
    }

    if (isPresent(templateRef)) {
      this._insertedViewRef = this._viewContainerRef.createEmbeddedView(templateRef);
    }
  }

 @Input() set active(active: boolean) {
     if (this._active == active) {
         return;
     }
     this._active = active;
     if (active) {
         this.viewContainerRef.createEmbeddedView(this.templateRef);
     }
     else {
         this.viewContainerRef.remove(0);
     }
 }

 private reloadComponent() {
    // Remove existing component
    if (this._currentComponent && this.viewContainerRef.length > 0) {
          this.viewContainerRef.remove(0);
    }
    // Add new component
    System.import(this.componentPath)
      .then(m => {
        this.componentResolver.resolveComponent(m[this.componentName]).then((factory: any) => {
          this._currentComponent = this.viewContainerRef.createComponent(factory, 0,  this.viewContainerRef.injector);
          this._currentComponent.instance.initialConfig = this.initialConfig;
        });
      });
 }

 @Input() set appRepeat(count: number) {
   if (count > this.viewContainerRef.length) {
     const diff = count - this.viewContainerRef.length;
     for (let i = 0; i < diff; ++i) {
       const repeatContext = new RepeatContext(this.viewContainerRef.length);
       this.viewContainerRef.createEmbeddedView(this.templateRef, repeatContext);
     }
   } else if (count < this.viewContainerRef.length) {
     const diff = this.viewContainerRef.length - count;
     for (let i = 0; i < diff; ++i) {
       this.viewContainerRef.remove(this.viewContainerRef.length - 1);
     }
   }
 }

  ngOnChanges(changes: SimpleChanges) {
    if (this.componentRef) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this.componentRef.hostView));
    }
    this._viewContainerRef.clear();
    this.componentRef = null;

    if (this.ngComponentOutlet) {
      let injector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;

      this.componentRef = this._viewContainerRef.createComponent(
          this._cmpFactoryResolver.resolveComponentFactory(this.ngComponentOutlet),
          this._viewContainerRef.length, injector, this.ngComponentOutletContent);
    }
  }

    constructor(containerType: Type<W>, vcr: ViewContainerRef) {
        this.injector = vcr.injector;
        // If the host is already wrapped, we don't do anything
        if (!this.injector.get(containerType, null)) {
            const cfr = this.injector.get(ComponentFactoryResolver);
            const el = this.injector.get(ElementRef);

            // We need a new anchor, since we're projecting the current one.
            vcr.createComponent(cfr.resolveComponentFactory(EmptyAnchor));
            const factory: ComponentFactory<W> = cfr.resolveComponentFactory(containerType);
            // We're assuming only one projection slot, but in more complex cases we might want to provide
            // a different array of projected elements.
            const containerRef = vcr.createComponent(factory, undefined, undefined, [[el.nativeElement]]);
            // We can now remove the useless anchor
            vcr.remove(0);

            // We note that the container was dynamically created
            containerRef.instance._dynamic = true;

            // We keep the wrapper's injector to access the dependencies that weren't available before.
            this.injector = containerRef.injector;
        }
    }