渲染器已被标记为废弃，建议使用渲染器2，是否有`invokeElementMethod`的替代方法？

Question

渲染器已被标记为废弃，建议使用渲染器2，是否有`invokeElementMethod`的替代方法？

20

我希望为我的一个副业项目实现一个聊天流，其中新消息添加到底部，并且窗口应向下滚动以显示最新的消息。

为此，我选择在组件上使用 ViewChildren 查找最后一条消息（最新的），并在 nativeElement 上使用 scrollIntoView。

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

问题是 renderer 已被弃用，而推荐使用 renderer2，并且我无法找到 renderer2 中 invokeElementMethod 方法的替代方法。

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

- endyjasmi

1

https://github.com/angular/angular/issues/15008#issuecomment-285141070 - yurzui

2个回答

0

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

假设我们有这样一个视图：

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

在 ngAfterViewInit() 中，需要像这样给予焦点：

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

- Zameer Ansari

@Brian 欢迎你的意见！你能把对你有效的代码作为答案发表出来吗？这样其他人也能从中受益。 - Zameer Ansari

这是完整的示例：https://stackblitz.com/edit/angular-ivy-oi2ydk?ctl=1&embed=1&file=src/app/app.component.ts - Rinold

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- seytzhan · Accepted Answer

你可以使用Renderer2的selectRootElement方法。

例如：

constructor(private renderer: Renderer2) {}

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

其中 domElementId 表示你在 HTML 中设置的 id='domElementId'

更新：

根据 Angular 官方文档，提供一个第二个参数用于 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