Angular PortalComponent - не может ввести данные с помощью инжектора - PullRequest
Новая
       14

Angular PortalComponent - не может ввести данные с помощью инжектора

0 голосов
/ 15 апреля 2019

Я внедряю загрузчик изображений галереи для своего приложения.Я хочу при загрузке показать загрузку, в которой я могу отображать, скажем, имена загруженных изображений.Я следовал за разговорами о componentportal и инжекторах, но я всегда заканчиваю циклическим внедрением зависимостей ...

Когда я использую "конструктор (@Inject (CONTAINER_DATA) public data: any)" на созданном компоненте, он хочетимпортировать его из службы (импортировать {CONTAINER_DATA} из "../../services/nord-loading.service";), но, поскольку служба создает компонент, конечно, это циклическая зависимость ...

Я, конечно, что-то упустил или неправильно понял, но не могу найти, что это ...

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) {
    }
}
...