Невозможно изменить ширину тоста, используя OverlayRef (Angular Material) updateSize () - PullRequest
0 голосов
/ 05 марта 2019

Я использую 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 })
    }
}

Фактический: Actual Result

Ожидаемое: Expected Result

Может ли кто-нибудь подтвердить, что происходит, и как я мог бы это исправить? Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...