如何专注于一个领域？

Question

我从 Angular 2 更新到 Angular 4，在文档中它被编写为使用 Renderer2 而不是 Renderer 已弃用。

现在正在查看渲染器 源代码，但无法像以前那样找到调用 focus() 方法的方法。

旧方法：

this.renderer.invokeElementMethod(element, 'focus', []);

什么是新方法？

编辑

如果我关注的元素是通过 QuerySelector 获得的怎么办？

例如：

 let inputField = document.querySelectorAll('.dialog input');
if ( inputField[0] ) {
   inputField[0].focus();
}

由于它是通过 QuerySelector 获得的，因此 focus() 方法不存在。

原文由 Hassan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

invokeElementMethod 已弃用，并且不会找到返回新渲染器的方式。要将焦点设置到一个元素，您现在可以简单地使用它：

 element.nativeElement.focus();

如果您使用的是 document.querySelectorAll ，那么您正在做的事情不是有角度的，您应该找到另一种方法来做。如果没有其他方法可以做到，那么同样的原则也适用。 focus() 方法是纯 javascript，因此您可以在 angular2/typescript 中使用它。请务必在组件的 querySelectorAll 钩子中执行 ngAfterViewInit 钩子：

 ngAfterViewInit() {
   let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0];
   inputField && inputField.focus();
}

原文由 Poul Kruijt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以使用 Renderer2 的 selectRootElement 方法。

例如：

 constructor(private renderer: Renderer2) {}

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

，其中 domElementId 在您的 html 中是 id=‘domElementId’

原文由 seytzhan 发布，翻译遵循 CC BY-SA 3.0 许可协议