Renderer устарел как услуга для renderer2, альтернатива для `invokeElementMethod`?

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

Чтобы сделать это, я решил использовать ViewChildren для компонента, чтобы найти последнее сообщение (последнее) и использовать scrollIntoView на nativeElement.

Чтобы не вызвать метод, напрямую обратившись к DOM API nativeElement.scrollIntoView(). Я считаю, что мне нужно будет использовать renderer.invokeElementMethod(nativeElement, 'scrollIntoView').

Проблема renderer устарела в пользу renderer2, и я не могу найти альтернативы для метода invokeElementMethod в renderer2.

Вопрос: есть ли метод, который я пропустил в renderer2, который делает именно это? или у нас есть новый способ сделать вызов метода элемента сейчас?

Ответы

Ответ 1

Вы можете использовать метод selectRootElement для Renderer2.

Например:

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').scrollIntoView()

где domElementId равен id = 'domElementId' в вашем html

ОБНОВИТЬ

Предоставьте второй аргумент для selectRootElement в соответствии с официальной документацией Angular, поскольку он используется для сохранения вашего контента.

selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

this.renderer
  .selectRootElement'#domElementId', true)  // Supply true for the 2nd arg to make sure your content is preserved.
  .scrollIntoView()                      // Or ({ behavior: 'smooth' }) for smooth scrolling

Ответ 2

Угловое обновление Renderer2

Добавил демо Stackblitz для его фактического поведения

Используйте Renderer2 и SelectRootElement, но не забудьте указать второй аргумент

Укажите второй параметр для selectRootElement в соответствии с официальной документацией Angular для сохранения вашего контента.

selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

this.renderer
       .selectRootElement'#elementId', true)  // Supply true for the 2nd arg to make sure your content is preserved.
       .scrollIntoView()                      // Or ({ behavior: 'smooth' }) for smooth scrolling

Ответ 3

Позвольте ответить на это с помощью exapmple:

Если у нас есть вид:

<input #inp1 type="text" placeholder="focus on me" />

Внутри ngAfterViewInit() его нужно сфокусировать следующим образом:

this.renderer.selectRootElement("inp1").scrollIntoView();