• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript core.ComponentRef类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@angular/core.ComponentRef的典型用法代码示例。如果您正苦于以下问题:TypeScript ComponentRef类的具体用法?TypeScript ComponentRef怎么用?TypeScript ComponentRef使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了ComponentRef类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: load

  // 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);
  }
开发者ID:matoilic,项目名称:OnsenUI,代码行数:34,代码来源:component-loader.ts


示例2:

  /**
   * 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;
  }
开发者ID:OkBayat,项目名称:material2,代码行数:34,代码来源:dom-portal-outlet.ts


示例3: ifLoader

  @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);
    }
  }
开发者ID:guillaumeLeRoy,项目名称:eritis_fe,代码行数:25,代码来源:if.directive.ts


示例4:

  /**
   * 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;
  }
开发者ID:Shivk355,项目名称:mywork,代码行数:36,代码来源:dom-portal-host.ts


示例5: cleanup

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

        if (this._contentComponentRef) {
            this._contentComponentRef.destroy();
            this._contentComponentRef = undefined;
        }
    }
开发者ID:edcarroll,项目名称:ng2-semantic-ui,代码行数:8,代码来源:popup-component-controller.ts


示例6:

  /** 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;
  }
开发者ID:CedricCazin,项目名称:material2,代码行数:58,代码来源:dom-portal-host.ts


示例7: Error

  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$);
  }
开发者ID:ng-vcl,项目名称:ng-vcl,代码行数:29,代码来源:wormhole-base.ts


示例8:

 dialog.onDestroy.subscribe( () => {
   if (typeof cmpRef.instance.canDestroy === 'function') {
     cmpRef.instance.canDestroy().then ( () => cmpRef.destroy() );
   } else {
     cmpRef.destroy();
   }
 });
开发者ID:Anand024,项目名称:angular2-modal,代码行数:7,代码来源:dom-modal-renderer.ts


示例9: ngOnDestroy

 /**
  * On destroy
  */
 ngOnDestroy(): void
 {
     if ( this.previewRef )
     {
         this.previewRef.destroy();
     }
 }
开发者ID:karthik12ui,项目名称:fuse-angular-full,代码行数:10,代码来源:example-viewer.ts


示例10: removeDrawerElements

  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;
  }
开发者ID:marlonprudente,项目名称:composer,代码行数:18,代码来源:drawer-ref.ts



注:本文中的@angular/core.ComponentRef类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript core.ComponentResolver类代码示例发布时间:2022-05-28
下一篇:
TypeScript core.ComponentFactoryResolver类代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap