web-dev-qa-db-fra.com

Renderer est déconseillé en faveur de renderer2, alternative à `invokeElementMethod`?

Pour un projet parallèle, je veux implémenter un flux de discussion où un nouveau message est ajouté en bas et les fenêtres doivent défiler vers le bas pour afficher le dernier message.

Pour ce faire, j'ai choisi d'utiliser ViewChildren sur le composant pour trouver le dernier message (le plus récent) et d'utiliser scrollIntoView sur le nativeElement.

Afin de ne pas appeler la méthode en accédant directement à l'API DOM nativeElement.scrollIntoView(). Je crois que je devrai utiliser renderer.invokeElementMethod(nativeElement, 'scrollIntoView').

Le problème est renderer est déconseillé au profit de renderer2 et je ne peux pas trouver d'alternative pour la méthode invokeElementMethod dans renderer2.

La question est, y a-t-il une méthode qui m'a manqué dans renderer2 ça fait juste ça? ou nous avons maintenant une nouvelle façon d'invoquer la méthode des éléments?

javascriptangulartypescriptrenderer
15
endyjasmi

Vous pouvez utiliser la méthode selectRootElement de Renderer2 .

Par exemple:

constructor(private renderer: Renderer2) {}

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

, où domElementId est id = 'domElementId' dans votre html

[~ # ~] mise à jour [~ # ~]

Fournissez un deuxième argument pour selectRootElement selon Angular's Official Documentation tel qu'il est utilisé pour conserver votre contenu

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
14
seytzhan