专注于 Angular 向导每一步的输入

Question

环境

Angular 8
AZ-精灵

要求

当用户移动到某个步骤时，我们需要让第一个（或特定的）元素获得焦点。每个步骤都有自己不同的元素（输入、按钮、下拉列表等），这些元素应该自动聚焦，这样用户就不必手动单击一个来启动流程。

代码已尝试

在元素上使用 autofocus 标签。与向导一样，除了第一个元素外，这不起作用，整个步骤集是一个 DOM.
在每个步骤组件中的所需元素上使用 ngOnViewEdit 事件和 ViewChild 来设置焦点

ngOnViewEdit() { var emailElement = (this.email.nativeElement); 如果（电子邮件元素）{ emailElement.focus(); } 别的警报（"Email element not found"）； } 这也不起作用。还尝试使用超时从 0 到 1000 不等的 setTimeout 调用来包装方法的主体。
在向导的 stepEnter 中尝试访问 ViewChild 并进行焦点尝试。这也失败了

组件UI

`<aw-wizard-step (stepEnter)="setFocus()">
    <app-cost-impact></app-cost-impact>
</aw-wizard-step>`

组件 TS

setFocus() { var emailComponent = <AddEmailComponent><unknown>this.wizard.currentStep; var emailElement = (<HTMLInputElement>emailComponent.email.nativeElement); if (emailElement) { emailElement.focus(); } else alert("Email element not found"); }

挑战

我们需要想出一些方法来访问每个步骤的元素，并使其足够通用以处理所有步骤

Answer 1

这可以解决这个问题，只需将一个元素传递给 setFocus 方法，然后运行焦点方法。

  setFocus(elm:HTMLElement){
    setTimeout(() =>{
       elm.focus();
    })
  }

模板

<aw-wizard>
 <aw-wizard-step stepTitle="Title of step 1" (stepEnter)="setFocus(email)">
        Content of Step 1
        <button type="button" awNextStep>Next Step</button>
        <button type="button" awNextStep>Go directly to third Step</button>
        <input type="text" placeholder="email" #email>
 </aw-wizard-step>
 <aw-wizard-step stepTitle="Title of step 2" awOptionalStep (stepEnter)="setFocus(age)">
        Content of Step 2
        <button type="button" awPreviousStep>Go to previous step</button>
        <button type="button" awNextStep>Go to next step</button>
        <input type="text" placeholder="age" #age>
 </aw-wizard-step>
</aw-wizard>

demo

Answer 2

尝试将输入元素的 id 传递给 setFocus 方法并按如下方式更改 setFocus 方法：

  setFocus (id: string) {
        setTimeout(() => {
          var inputEl= document.getElementById(id);
          if (inputEl) {
            document.getElementById(inputEl).focus();
          }
        }, 0);
      }

组件 UI:


    `<aw-wizard-step (stepEnter)="setFocus('inputElementId')">
        <first-component></first-component>
    </aw-wizard-step>
    <aw-wizard-step (stepEnter)="setFocus('anotherElementId')">
        <second-component></second-component>
    </aw-wizard-step>
    `

这样，你只需要在相应的typescript文件中声明一次setFocus方法，传入输入元素的id就可以将其用于任意数量的组件。

专注于 Angular 向导每一步的输入

Focus on input on each step of Angular wizard

html

dom

wizard

angular