我想用动作回调实现通知祝酒清单,并且可以取消通知。
我希望它们出现在彼此之间,最新出现在顶部
为此,我需要更新现有通知的位置。
以下是我们的通知服务
@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