如何將焦點設置為另一個輸入？

Question

我需要能夠在發生某些事件時將焦點切換到輸入元素。 我如何在Angular 2中做到這一點？

例如：

<input (keyUp)="processKeyUp($event)"/>
<input (focusme)="alert('i am focused')"/>

我希望在第一個按下某個鍵時聚焦第二個輸入框。 我想我需要使用一個自定義事件（ focusme在代碼片段中），但我不知道在何處或如何聲明它，以及是否為其使用@Directive注釋，或以某種方式將其定義包含在組件中。 總之，我很難過。

UPDATE

忘了提，我知道我可以通過在html中使用局部變量來做到這一點，但我希望能夠從組件中做到這一點，並且我希望能夠在觸發focusme事件時執行復雜的邏輯，以便控制監聽它可以確定它是否適合他們。 謝謝！

Answer 1

您可以將第二個輸入作為變量傳遞給第一個輸入

例如

HTML

<!-- We pass focusable as a parameter to the processKeyUp function -->
<input (keyup)="processKeyUp($event, focusable)"/>

<!-- With #focusable we are creating a variable which references to the input -->
<input #focusable /> 

后來你的js / ts

@Component({
  selector: 'plunker-app'
})
@View({
  templateUrl: 'main.html'
})
class PlunkerApp {

  constructor() {
  }

  processKeyUp(e, el) {
    if(e.keyCode == 65) { // press A
      el.focus();
    }
  }
}

el是原始元素，因此您可以在其上使用純javascript。

這是一個plnkr所以你可以看到它工作。

我希望它有所幫助。

Answer 2

對於DOM元素的操作總是嘗試使用Directives。 在這種情況下，您可以編寫簡單的指令。

為了從指令訪問DOM，我們可以通過指令構造函數中的ElementRef注入我們的宿主DOM元素的引用 。

constructor(@Inject(ElementRef) private element: ElementRef) {}

對於綁定值的變化檢測，我們可以使用ngOnChanges實時循環方法。

protected ngOnChanges() {}

所有其他的東西都很簡單。

簡單解決方案

// Simple 'focus' Directive
import {Directive, Input, ElementRef} from 'angular2/core';
@Directive({
    selector: '[focus]'
})
class FocusDirective {
    @Input()
    focus:boolean;
    constructor(@Inject(ElementRef) private element: ElementRef) {}
    protected ngOnChanges() {
        this.element.nativeElement.focus();
    }
}

// Usage
@Component({
    selector : 'app',
    template : `
        <input [focus]="inputFocused" type="text">
        <button (click)="moveFocus()">Move Focus</button>
    `,
    directives: [FocusDirective]
})
export class App {
    private inputFocused = false;
    moveFocus() {
        this.inputFocused = true;
        // we need this because nothing will 
        // happens on next method call, 
        // ngOnChanges in directive is only called if value is changed,
        // so we have to reset this value in async way,
        // this is ugly but works
        setTimeout(() => {this.inputFocused = false});
    }
}

使用EventEmitter解決方案

用setTimeout解決問題（（）=> {this.inputFocused = false}）; 我們可以綁定我們的事件源指令 - EventEmitter，或綁定到Observable。 以下是EventEmitter用法的示例。

// Directive
import {Directive, EventEmitter, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[focus]'
})
class FocusDirective {
    private focusEmitterSubscription;   
    // Now we expect EventEmitter as binded value
    @Input('focus')
    set focus(focusEmitter: EventEmitter) {
        if(this.focusEmitterSubscription) {
            this.focusEmitterSubscription.unsubscribe();
        }
        this.focusEmitterSubscription = focusEmitter.subscribe(
            (()=> this.element.nativeElement.focus()).bind(this))
    }    
    constructor(@Inject(ElementRef) private element: ElementRef) {}
}

// Usage
@Component({
    selector : 'app',
    template : `
        <input [focus]="inputFocused" type="text">
        <button (click)="moveFocus()">Move Focus</button>
    `,
    directives: [FocusDirective]
})
class App {
    private inputFocused = new EventEmitter();
    moveFocus() {
        this.inputFocused.emit(null);    
    }
}

這兩種解決方案都可以解決您的問題，但其次是性能更好，看起來更好。

Answer 3

實際上你不需要為此編寫任何TS代碼（我正在使用另一個答案的例子）：

<input (keyup.enter)="focusable.focus()"/>
<input #focusable /> 

Answer 4

設置焦點 - Angular 2/5

<input type="text" [(ngModel)]="term2" #inputBox>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

  @ViewChild("inputBox") _el: ElementRef;

  setFocus() {
    this._el.nativeElement.focus();
  }
}

用於設置對負載的關注

ngAfterViewInit() {
    this._el.nativeElement.focus();
  }

您可以相應地更新此邏輯以進行按鍵操作。

更多信息