Question

对于我的旁边项目，我想实现一个聊天流，其中新消息添加到底部，窗口应滚动到底部以显示最新消息。

为了做到这一点，我选择在组件上使用ViewChildren查找最后一条消息（最新消息）并在scrollIntoView上使用nativeElement。

为了不通过直接访问DOM API nativeElement.scrollIntoView()来调用该方法。我相信我需要使用renderer.invokeElementMethod(nativeElement, 'scrollIntoView')。

问题是renderer已被弃用，而不是renderer2，我似乎无法找到invokeElementMethod中方法renderer2的替代方法。

问题是，我在renderer2中错过了哪种方法可以做到这一点？或者我们现在有一种新的方法来调用元素方法？

Answer 1

您可以使用 Renderer2 的 selectRootElement 方法。

例如：

constructor(private renderer: Renderer2) {}

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

，其中 domElementId 在您的HTML中 id =＆＃39; domElementId＆＃39;

<强>更新

根据Angular's Official Documentation为selectRootElement提供第二个参数，因为用于保存您的内容

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

Answer 2

让我们通过一个例子回答这个问题：

如果我们有这样的观点：

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

在ngAfterViewInit()内，需要像这样集中注意力：

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

Renderer被弃用为renderer2的一个恩惠，替代`invokeElementMethod`？

2 个答案: