Question

当用户登陆到托管表单的页面时，我想将注意力集中在表单的第一个输入字段上。我是Angular的新手，并且对使用nativeElement和Renderer2来解决此问题有疑问：

1）我读过ElementRef.nativeElement.focus（）并不是将焦点放在输入字段上的好方法。我猜想是因为这样做直接修改了DOM？安全风险是专门使用ElementRef造成的，还是没有ElementRef就会存在（即类似@ViewChild（'refVariable'）。nativeElement.focus（）之类的风险）？

2）在我的应用程序中，我使用了Renderer2指令来将重点放在字段上。有人可以发表评论，如果Angular将重点放在某个领域上的方式（并且不会产生Angular警告的XSS安全风险）？

constructor(private renderer: Renderer2) {}

@ContentChild("inputbox") varinputbox;

ngOnInit(){setTimeout(() => {this.renderer.selectRootElement(this.varinputbox.nativeElement).focus();},0);}

ngAfterViewInit(){setTimeout(() => {this.renderer.selectRootElement(this.varinputbox.nativeElement).focus();},0);}

3）如果这是可以接受的方法，那么在浏览器刷新事件发生后，为什么Microsoft Edge不会将重点放在第一个输入字段（表单中的所有输入字段都具有“ inputbox”引用变量）的任何想法？浏览器只是突出显示第一个输入框，而没有在其中显示光标（因此要求用户在输入前单击该框），并将焦点转移到浏览器顶部的刷新按钮。这是表单的html：

<div class="container">
  <h2 class="text-center">Text</h2>
  <form class="mx-auto" [formGroup]="contactUsForm" (ngSubmit)="onSubmit()">
    <div class="text-center mt-3 mb-3 successMessage" [ngClass]="isVisible">{{successMessage}}</div>
    <div class="float-right"><span class="asterisk">*</span> Required</div>
    <div class="form-group">
      <div>
        <label for="idSubject">Subject</label>
        <input #inputbox type="text" class="form-control" formControlName="subject" id="idSubject" appAutofocus>
      </div>
      <div>
        <label for="idMessage">Message<span class="asterisk">*</span>
        <span *ngIf="!message.value && message.errors.required && submitted" class="text-danger"> Required</span></label>
        <textarea #inputbox type="text" class="form-control" rows="5" formControlName="message" id="idMessage" required></textarea>
      </div>
      <button type="submit" class="btn">Submit</button>
    </div>
  </form>
</div>

将焦点放在输入元素上的哪种首选技术是ViewChild或Renderer2？

0 个答案: