Прокрутка вниз; scrollTop = scrollHeight запускается слишком рано?

Живой пример: https://angular-txvcna.stackblitz.io/ (Код).

У меня есть компонент «чат», и я хочу, чтобы div прокручивался вниз каждый раз, когда добавляется сообщение.

Я добавляю новое сообщение, помещая элемент в массив (this.messages.push(message)) и пытаясь после этого прокрутить вниз вправо. Похоже, что операция прокрутки this.chatboxBody.nativeElement.scrollTop = this.chatboxBody.nativeElement.scrollHeight; находится перед хуками жизненного цикла angular, потому что scrollHeight имеет более старое значение высоты при выполнении.

На данный момент я использую setTimeout, чтобы исправить это, но это действительно похоже на ярлык. Как я могу это исправить? (В идеале — как-то подписаться на хук, обновляющий дочерний компонент)


typescript angular angular-lifecycle-hooks
person noamyg    schedule 21.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня есть пара идей:

  1. Вы можете изменить ввод сообщений на установщик, чтобы при вводе сообщения он устанавливал частную версию сообщения и обрабатывал прокрутку внутри компонента. (Лично мне кажется, что это лучшее решение, так как логику того, как прокрутить вниз, тогда не нужно будет повторять в каждом месте, где используется этот компонент)
    private _message: VivrMessage;
        @Input()
            set message(val: VivrMessage){
        if (val){
            this._message = val;
            this.handleScrolling();
        }
    }
  1. Вы можете сделать то же самое, что и выше, но вместо того, чтобы обрабатывать прокрутку в компоненте сообщений, иметь вывод, который затем будет выполнять родительский компонент.
person dmoore1181    schedule 21.05.2019
comment
Метод 1 немного полезен, но мне приходится использовать scrollIntoView(), а это не то же самое, что прокрутка вниз. Кроме того, таким образом прокрутка связана с инициализацией message (что, если я захочу изменить его содержимое?). Метод 2 действительно грязный - я уже использую Input для установки сообщения и Output для уведомления, когда пользователь нажимает на опцию - определение другого Output кажется реальным обходным путем ;-). Спасибо за Ваш ответ. - person noamyg; 21.05.2019
comment
Если вы измените содержимое, будет запущен тот же сеттер. Каждый раз, когда родитель изменяет свое значение, которое он установил для ввода сообщения, будет выполняться сеттер. - person dmoore1181; 21.05.2019