全局定位的overlayRef的角度cdk覆盖更新位置

时间:2018-12-18 06:38:31

标签: angular angular-cdk

我想用动作回调实现通知祝酒清单,并且可以取消通知。

我希望它们出现在彼此之间,最新出现在顶部

为此,我需要更新现有通知的位置。

以下是我们的通知服务

@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在cdk对话框中模仿DialogRef

0 个答案:

没有答案