如何在 Angular 6 中将焦点设置在整个应用程序中每个页面上的第一个输入字段上答案

【问题标题】：How can I set focus on first input field on each page in my whole application in angular 6如何在 Angular 6 中将焦点设置在整个应用程序中每个页面上的第一个输入字段上
【发布时间】：2019-09-28 06:39:39
【问题描述】：

我的应用程序处于最后阶段，我们还没有在输入标签上实现自动对焦。现在我们有一个要求，我们希望将焦点放在每个页面中的第一个输入标签上。我的应用程序中有很多页面/表单，因此在每个组件中使用 ViewChild 可能是一项乏味的任务。因此，我正在寻找一种可以在一个地方编写一些代码的方法，它会触发对加载任何页面的第一个输入的关注。谁能建议一些方法来做到这一点？

【问题讨论】：

autofocus 属性呢？
@AJT82 我认为 OP 正在寻找通用逻辑，它为每个组件找到第一个输入并设置焦点，但不对组件本身进行任何更改。
@SangramNandkhile 是正确的。在每个组件的第一个输入上设置自动对焦是一项乏味的任务，而且我们可能会错过一些东西。正如桑格拉姆所说，我正在寻找一些共同的逻辑。可能是一些使用角度变化检测或编译器运行的服务，并在所有组件中找到第一个输入并放置自动对焦。可能是角度编译器如何检测装饰器并根据该装饰器在类上放置一些代码。
I'm looking for some common logic. may be some service which runs with angular change detection or compiler and find first input in all the components and puts autofocus. May be how angular compiler detects decorators and puts some code according to that decorator on the class 好的。那么您是否尝试过一些方法来实现这一目标？
我尝试为此创建一个装饰器，但仍然需要在每个组件中调用它。所以我们在想如果我们能有更好的解决方案@AJT82

标签： angular

【解决方案1】：

您可以在应用程序组件中订阅路由器事件，如果即使是 navigationEnd 的实例也意味着发生路由更改，然后在页面上获取第一个输入并使用 jquery 获得焦点在您的应用组件构造函数中类似于下面的内容

 router.events.subscribe((e) => {
      if(e instanceof NavigationEnd)
        {
         var ele= $('input[type=text],textarea').filter(':visible:first').focus();
        }
    });

Working demo

【讨论】：

很好的解决方案！

【解决方案2】：

我想出了一个方法装饰器，它可以做你想做的事。也就是说，如果您不介意将此功能导入所有页面。然后，您只需将此装饰器附加到 AfterViewInit 生命周期，如下所示：

@setFocus()
ngAfterViewInit() { }

装饰器函数将在找到的第一个输入字段之后进行搜索，如果找到，则将焦点设置到该元素：

export function setFocus(): MethodDecorator {
  return function (target: Object, key: string, descriptor: PropertyDescriptor) {
    descriptor.value = function (...args: any[]) {
      const ele = document.getElementsByTagName("INPUT")[0] as HTMLElement;
      if (ele) {
        ele.focus();
        return;
      }
    }
  }
}

STACKBLITZ

【讨论】：

【解决方案3】：

你可以使用 HTML 的 tabindex 属性 tabindex="1" 的元素将首先获得焦点

例如：

见：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex :https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

注意：使用 tabindex 时要小心，因为它会在与预期的 tab 顺序没有相似之处的内容上强加一个 tab 顺序。

【讨论】：