Angular - директива автофокуса для встроенных компонентов - PullRequest
Новая
       6

Angular - директива автофокуса для встроенных компонентов

0 голосов
/ 30 октября 2019

Я реализовал это в нашем продукте, и для простых полей ввода это работает довольно хорошо. К сожалению, только части нашей входной архитектуры используют, в основном мы используем пользовательские компоненты 

<app-edit-value [control]="control"></app-edit-value>

, которые принимают объект FormControl и создают немного более приятный входной объект. Конечно, эта директива здесь не сработает, поэтому я добавил необязательный ввод [autofocus].

Скрытая позади, у нас есть структура, которая может обрабатывать различные типы ввода данных пользователем, такие как флажки, списки, тексты,числа и многое другое 

<mat-form-field *ngIf="control.type = ...">
   <input appAutoFocus="autofocus" ...>
</mat-form-field>
...

Моя идея состояла в том, чтобы передать директиву AppAutofocus фактически таким способным к фокусировке элементам, как этот, но она не работает, как предполагалось. Даже когда я никогда не настраиваю элементы [autofucos], они оказываются в фокусе после загрузки страницы, и я понятия не имею, почему.

Я упускаю что-то очевидное или, может быть, есть более элегантный способ сделать это? это? * * 1013

1 Ответ

0 голосов
/ 30 октября 2019

Кажется, что работает, немного подправив директиву. Вот код директивы: 

export class AutofocusDirective {
  @Input('autofocus') public isEnabledAutoFocus: boolean;

  public constructor(private el: ElementRef) {}

  public ngAfterContentInit() {
    if (this.isEnabledAutoFocus) {
      this.el.nativeElement.focus();
    }
  }
}

Затем я передал FormControl из родительского объекта в Child и подключил его к входу (где применяется директива). 

<form [formGroup]="form">
    <input formControlName="input1" name="one" type="text" placeholder="Input 1" />
    <input formControlName="input2" name="two" type="text" placeholder="Input 2" />
    <app-input-parent [control]="form.get('input3')" isAutoFocus="true"></app-input-parent>
</form>

И ребенок: 

<input [autofocus]="isAutoFocus" [formControl]="control" placeholder="Input child" type="text">

Вот ссылка для проверки моего кода

...