угловое наложение cdk, обновляющее положение overlayRef, который позиционируется глобально - PullRequest
Новая
       12

угловое наложение cdk, обновляющее положение overlayRef, который позиционируется глобально

0 голосов
/ 18 декабря 2018

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

Я хочу, чтобы они появлялись один под другим, с последними сверху

Для этогоМне нужно обновить позиции существующего уведомления.

Следующим является наш сервис уведомлений 

@Injectable()
export class Toast {

    refArray: ToastRef[] = [];
    constructor(private overlay: Overlay, private injector: Injector) { }

    show(config: ToastConfig) {
        if (!!config.id && this.refArray.some(r => r.id === config.id)) {
            return new ToastRef();
        }
        const _config: ToastConfig = { ...defaultConfig, ...config };
        const overlayConfig = this.createConfig();
        const overlayRef = this.overlay.create(overlayConfig);
        const toastRef = this.buildRef(overlayRef, _config);

        const injector = new PortalInjector(this.injector, new WeakMap<any, any>([[ToastRef, toastRef], [TOAST_DATA, _config]]));
        const componentPortal = this.getComponentPortal(injector);
        overlayRef.attach(componentPortal);

        this.refArray.push(toastRef);
        this.reposition();

        setTimeout(() => toastRef.close(undefined) , _config.timeout);
        return toastRef;
    }

    private createConfig() {
        return new OverlayConfig({
            positionStrategy: this.overlay.position().global().right('1rem')
        });
    }

    private buildRef(overlayRef: OverlayRef, config: ToastConfig) {
        if (!config.id) {
            config.id = 'toast-' + generateUUID();
        }
        const id = config.id;
        return new ToastRef(overlayRef, () => {
            this.refArray = this.refArray.filter(r => r.id !== id);

            this.reposition();
        }, id);
    }

    private getComponentPortal(injector: PortalInjector) {
        return new ComponentPortal(ToastComponent, undefined, injector);
    }
    private reposition() {

    }
}

const defaultConfig: Partial<ToastConfig> = {
    timeout: 10000 // 10 seconds
};

, где ToastRef имитирует DialogRef из диалога cdk

...