Para un proyecto paralelo mío, quiero implementar una transmisión de chat en la que se agregue un nuevo mensaje en la parte inferior y las ventanas se desplacen hacia la parte inferior para mostrar el mensaje más reciente.
Para hacer eso, opté por usar ViewChildren en el componente para encontrar el último mensaje (más reciente) y usar scrollIntoView en nativeElement .
Para no llamar al método accediendo directamente a la API DOM nativeElement.scrollIntoView() . Creo que necesitaré usar renderer.invokeElementMethod(nativeElement, 'scrollIntoView') .
El problema es que el renderer está en desuso a favor de renderer2 y parece que no puedo encontrar una alternativa para el método invokeElementMethod en renderer2 .
La pregunta es, ¿hay algún método que me perdí en renderer2 que haga exactamente eso? o tenemos una nueva forma de invocar el método del elemento ahora?
Puede usar el método selectRootElement de Renderer2 .
Por ejemplo:
constructor(private renderer: Renderer2) {} this.renderer.selectRootElement('#domElementId').scrollIntoView(), donde domElementId es id='domElementId' en tu html
ACTUALIZAR
Proporcione un segundo argumento para selectRootElement según la documentación oficial de Angular, ya que se usa para preservar su contenido
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 scrollingRespondamos esto con un ejemplo:
En caso de que tengamos una vista como esta:
<input #inp1 type="text" placeholder="focus on me" /> Dentro ngAfterViewInit() , debe enfocarse de esta manera:
this.renderer.selectRootElement("inp1").scrollIntoView();