ng:错误:尝试将上下文传递到ComponentPortal时无法解析组件的所有参数

时间:2018-12-22 15:22:23

标签: angular angular-cdk

尝试使用自定义注入令牌将上下文传递到ComponentPortal,并且可以,但是build --prod导致:

错误:无法解析TooltipComponent的所有参数

如果我将我的InjectionjectToken导出到生成我的Portal的服务中,则会出错,但是我有循环依赖服务->组件->服务

服务:


    import { ApplicationRef, ComponentFactoryResolver, Injectable, 
    InjectionToken, Injector } from '@angular/core';
    import { BasePortalOutlet, ComponentPortal, DomPortalOutlet, 
    PortalInjector, PortalOutlet } from '@angular/cdk/portal';
    import { TooltipComponent } from './tooltip.component';
    import TooltipDataInjector from './TooltipInjector';

    @Injectable({
      providedIn: 'root'
    })

    export class TooltipService {

      private _tooltipPortal: ComponentPortal;

      private _bodyPortalHost: DomPortalOutlet;

      constructor(
        private _factoryResolver: ComponentFactoryResolver,
        private _appRef: ApplicationRef,
        private _injector: Injector,
      ) {
        this._tooltipPortal = new ComponentPortal(
          TooltipComponent,
          undefined,
          this.createInjector({ })
        );

        this._bodyPortalHost = new DomPortalOutlet(
          document.body,
          this._factoryResolver,
          this._appRef,
          this._injector
        );
      }

      createInjector(data): PortalInjector {
        const tokens = new WeakMap([
          [TooltipDataInjector, data]
        ]);
        return new PortalInjector(this._injector, tokens);
      }

      show() {
        if (this._bodyPortalHost.hasAttached()) {
          this._bodyPortalHost.detach();
        }

        this._bodyPortalHost.attach(this._tooltipPortal);
      }

      hide() {
        this._bodyPortalHost.detach();
      }
    }

组件:


        import { Component, Inject, OnInit, Optional } from '@angular/core';
    import TooltipDataInjector from './TooltipInjector';

    @Component({
      selector: 'app-tooltip',
      templateUrl: './tooltip.component.html',
      styleUrls: ['./tooltip.component.scss']
    })

    export class TooltipComponent implements OnInit {


      constructor(@Optional() @Inject(TooltipDataInjector) public data: any) {
        console.log(data);
      }

      ngOnInit() {
      }


    }

TooltipInjector.ts:


    import { InjectionToken } from '@angular/core';

    export const TooltipDataInjector = new InjectionToken('TooltipDataInjector');

    export default TooltipDataInjector;

如何避免这些错误? JIT编译器可以正常构建

0 个答案:

没有答案