如何管理 Angular 2 自定義輸入組件的焦點狀態？

Question

我找不到通過 Angular 2 管理自定義輸入如何從label （及其for屬性）獲得焦點以及如何管理這些狀態的方法。

我試圖給我與普通人相同的聚焦和模糊行為。 對此有何想法？

謝謝！

Answer 1

HTML 有 tabindex 屬性，這使得任何元素都可以聚焦。 http://w3c.github.io/html/editing.html#the-tabindex-attribute

然后在組件中你可以監聽焦點事件：

 @HostBinding('tabindex') tabindex = 0;

 @HostListener('focus')
 focusHandler() {
   alert('focused!');
 }

Answer 2

考慮到可訪問性，每個輸入都必須包含一個標簽，因此輸入組件應該包含輸入和標簽標簽

imports...

@Component({
      selector: 'app-input',
      templateUrl: 
          `<label [for]="id">
              <div class="label">{{label}}</div>
              <input [id]="id"
                     [type]="type"
                     [attr.maxlength]="maxlength"
                     [autocomplete]="autocomplete"
                     [placeholder]="placeholder"
                     (input)="onInput($event)"
                     (focus)="onFocus()"
                     required
                 >
          </label>`,
      styleUrls: ['./input.component.scss'],
})

export class InputComponent{

  @Input() label: string;
  @Input() id: string;
  @Input() type: string;
  @Input() maxlength: string;
  @Input() autocomplete = "on";
  @Input() disabled = null;

  onInput(event: any){
      ....
  }

  onFocus(){
      ....
  }
}