TypeScript core.ComponentRef類代碼示例

  // Load an instance of ComponentRef in app view.
  load(componentRef: ComponentRef<any>) {
    const rootElement = componentRef.location.nativeElement;

    if (this.appRef['attachView']) {
      // angular2.3.x has `attachView` and `detachView` methods.
      this.appRef['attachView'](componentRef.hostView);

      componentRef.onDestroy(() => {
        this.appRef['detachView'](componentRef.hostView);

        if (rootElement.parentNode) {
          rootElement.parentNode.removeChild(rootElement);
        }
      });
    } else {
      if (this.appRef['registerChangeDetector']) {
        this.appRef['registerChangeDetector'](componentRef.changeDetectorRef);
      }

      componentRef.onDestroy(() => {
        if (this.appRef['unregisterChangeDetector']) {
          this.appRef['unregisterChangeDetector'](componentRef.changeDetectorRef);
        }

        if (rootElement.parentNode) {
          rootElement.parentNode.removeChild(rootElement);
        }
      });
    }

    const rootContainer = this.appRef['_rootComponents'][0].location.nativeElement;
    rootContainer.appendChild(rootElement);
  }

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

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

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

    protected cleanup():void {
        super.cleanup();

        if (this._contentComponentRef) {
            this._contentComponentRef.destroy();
            this._contentComponentRef = undefined;
        }
    }

  /** Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver. */
  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 ChangeDetector for that component to the application (which
    // happens automatically when using a ViewContainer).
    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);

      // ApplicationRef's attachView and detachView methods are in Angular ^2.3.0 but not before.
      // The `else` clause here can be removed once 2.3.0 is released.
      if ((this._appRef as any)['attachView']) {
        (this._appRef as any).attachView(componentRef.hostView);

        this.setDisposeFn(() => {
          (this._appRef as any).detachView(componentRef.hostView);
          componentRef.destroy();
        });
      } else {
        // When creating a component outside of a ViewContainer, we need to manually register
        // its ChangeDetector with the application. This API is unfortunately not published
        // in Angular < 2.3.0. The change detector must also be deregistered when the component
        // is destroyed to prevent memory leaks.
        let changeDetectorRef = componentRef.changeDetectorRef;
        (this._appRef as any).registerChangeDetector(changeDetectorRef);

        this.setDisposeFn(() => {
          (this._appRef as any).unregisterChangeDetector(changeDetectorRef);

          // Normally the ViewContainer will remove the component's nodes from the DOM.
          // Without a ViewContainer, we need to manually remove the nodes.
          let componentRootNode = this._getComponentRootNode(componentRef);
          if (componentRootNode.parentNode) {
            componentRootNode.parentNode.removeChild(componentRootNode);
          }

          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._hostDomElement.appendChild(this._getComponentRootNode(componentRef));

    return componentRef;
  }

  connect(attrs?: WormholeAttributes, events?: string[], index?: number): Observable<WormholeEvent> {
    if (typeof attrs === 'object' && attrs) {
      this.cachedAttrs = attrs;
    }

    this.disconnect();

    this.compRef = this.attach(this.componentClass, index);

    this.compRef.onDestroy(() => {
      this.compRef = undefined;
    });

    const instance = this.compRef.instance;

    if (this.cachedAttrs && typeof this.cachedAttrs === 'object') {
      Object.assign(instance, this.cachedAttrs);
    }
    this.compRef.changeDetectorRef.detectChanges();

    const events$ = (events || []).map(event => {
      if (!instance[event]) {
        throw new Error('Event not found: ' + event);
      }

      return instance[event] && instance[event].pipe( map(value => ({type: event, value})) );
    });
    return merge(...events$);
  }

 dialog.onDestroy.subscribe( () => {
   if (typeof cmpRef.instance.canDestroy === 'function') {
     cmpRef.instance.canDestroy().then ( () => cmpRef.destroy() );
   } else {
     cmpRef.destroy();
   }
 });

 /**
  * On destroy
  */
 ngOnDestroy(): void
 {
     if ( this.previewRef )
     {
         this.previewRef.destroy();
     }
 }

  private removeDrawerElements() {
    const windowNativeEl = this.drawerCmptRef.location.nativeElement;
    windowNativeEl.parentNode.removeChild(windowNativeEl);
    this.drawerCmptRef.destroy();

    if (this.backdropCmptRef) {
      const backdropNativeEl = this.backdropCmptRef.location.nativeElement;
      backdropNativeEl.parentNode.removeChild(backdropNativeEl);
      this.backdropCmptRef.destroy();
    }

    if (this.contentRef && this.contentRef.viewRef) {
      this.contentRef.viewRef.destroy();
    }

    this.drawerCmptRef = null;
    this.contentRef = null;
  }