尝试使用自定义注入令牌将上下文传递到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编译器可以正常构建