Я использую OverlayRef для создания тоста. На основании некоторых данных, которые я передаю тосту, ширина тоста изменяется. Я использую updateSize () для этого. Однако когда я меняю ширину, кажется, что меняется положение тоста. Я думаю, что происходит то, что ширина наложения изменяется, но фактическая ширина тоста определяется где-то еще (toastPortal?).
Для контекста, когда пользователь выполняет какое-либо действие, запускается метод показа ниже. Это создает overlayRef и ComponentPortal, необходимые для наложения и компонентов, содержащихся внутри (например, ToastComponent), который, в случае, определяет фактический элемент toast.
toast.service.ts
...
show(data: ToastData) {
const positionStrategy = this.overlay
.position()
.global()
.centerHorizontally()
.top(this.getPosition());
const overlayRef = this.overlay.create({ positionStrategy });
this.setToastWidth(data, overlayRef);
const toastRef = new ToastRef(overlayRef);
this._lastToast = toastRef;
const injector = this.getInjector(data, toastRef,
this.parentInjector);
const toastPortal = new ComponentPortal(ToastComponent, null,
injector);
overlayRef.attach(toastPortal);
return toastRef;
}
setToastWidth(data: ToastData, overlay: OverlayRef) {
const recurringRatio = 0.5;
const singleRatio = 0.4;
const viewWidth = window.innerWidth;
if (data.text.toLowerCase() === "recurring") {
overlay.updateSize({ width: viewWidth * recurringRatio })
} else if (data.text.toLowerCase() === "single") {
overlay.updateSize({ width: viewWidth * singleRatio })
}
}
Фактический:
Ожидаемое:
Может ли кто-нибудь подтвердить, что происходит, и как я мог бы это исправить? Заранее спасибо!