Renderer 被弃用，因为它是 renderer2 的替代品，是 `invokeElementMethod` 的替代品？

Question

对于我的一个业余项目，我想实现一个聊天流，其中新消息被添加到底部并且 windows 应该滚动到底部以显示最新消息。

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

为了不直接访问DOMAPI调用方法nativeElement.scrollIntoView()。我相信我需要使用 renderer.invokeElementMethod(nativeElement, 'scrollIntoView').

问题是 renderer 已被弃用，取而代之的是 renderer2，而且我似乎无法在 renderer2.

中找到方法 invokeElementMethod 的替代方法

问题是，是否有我在 renderer2 中遗漏的方法可以做到这一点？或者我们现在有一种调用元素方法的新方法？

Answer 1

您可以使用 Renderer2 的 selectRootElement 方法。

例如：

constructor(private renderer: Renderer2) {}

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

，其中 domElementId 在您的 html

中是 id='domElementId'

更新

Supply a Second Argument for selectRootElement as per Angular's Official Documentation as it is used to preserve your content

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` 的替代品？

Renderer is deprecated as a favor for renderer2, alternative for `invokeElementMethod`?

javascript

angular

typescript

renderer