Какой метод предпочтительнее для фокусировки на элементе ввода - ViewChild или Renderer2? - PullRequest
Новая
       35

Какой метод предпочтительнее для фокусировки на элементе ввода - ViewChild или Renderer2?

0 голосов
/ 21 апреля 2019

Я хочу сфокусироваться на первом поле ввода в моей форме, когда пользователь попадает на страницу, на которой размещена форма.Я новичок в Angular и у меня есть вопросы, касающиеся использования nativeElement и Renderer2 для достижения этой цели:

1) Я читал, что ElementRef.nativeElement.focus () не является хорошим способом сосредоточиться наполе ввода.Я полагаю, это потому, что это напрямую изменяет DOM?Является ли риск безопасности созданным в результате использования ElementRef конкретно, или он будет существовать даже без ElementRef (то есть что-то вроде @ViewChild ('refVariable'). NativeElement.focus () создаст подобный риск безопасности)?

2) В моем приложении я использовал директиву Renderer2, чтобы сфокусироваться на поле.Кто-то может прокомментировать, если Angular является способом сосредоточить внимание на поле (и не создает угрозы безопасности XSS, о котором предупреждает Angular)? 

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>
...