Question

我正在为我的应用实现图库图像上传器。我希望在开始上传时显示一个加载，其中可以显示上传图像的图像名称。我一直在谈论有关组件入口和进样器的话题，但是我总是以循环依赖注入来结束...

当我使用 “构造函数（@Inject（CONTAINER_DATA）公共数据：任意）” 在创建的组件上，它想从服务中将其导入（从“ ../../services/nord-loading.service”导入{CONTAINER_DATA}；），但是当服务创建组件时，这当然是循环依赖...

我肯定错过或误会了一些东西，但找不到它是什么...

gallery.component.ts：

this.uploader.onAfterAddingAll = (fileItems) => {
    this.loadingSrv.show('hey this is me');
};

loading.service.ts：

[...]
import {NordLoaderComponent} from "../components/nord-loader/nord-loader.component";
export const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');
[...]
constructor(private overlay: Overlay,
    private _injector: Injector) {
}
[...]
public show(message = '') {
    this.message = message;

    if (!this.overlayRef) {
            this.overlayRef = this.overlay.create(this.getOverlayConfig());
        }

    const spinnerOverlayPortal = new ComponentPortal(NordLoaderComponent, null, this.createInjector({
            msg : this.message
        }));

    const component = this.overlayRef.attach(spinnerOverlayPortal); 

}
createInjector(dataToPass): PortalInjector {
    const injectorTokens = new WeakMap();
    injectorTokens.set(CONTAINER_DATA, dataToPass);
    return new PortalInjector(this._injector, injectorTokens);
}

nord-loader.component.ts：

import {Component, OnInit} from '@angular/core';
// import {CONTAINER_DATA} from "../../services/nord-loading.service";

@Component({
    selector: 'nord-loader',
    templateUrl: './nord-loader.component.html',
    styleUrls: ['./nord-loader.component.scss']
})
export class NordLoaderComponent {
    constructor(@Inject(CONTAINER_DATA) public data: any) {
    }
}

Angular PortalComponent-无法使用注入器注入数据

0 个答案: