Question

目标

我有一个包含一些输入元素的表单（el1，el2 ...）
el1可能专注于开始
当keydown事件触发时，请执行以下操作：
- 如果没有输入元素具有焦点，则将焦点设置为第一个非空元素
- 如果任何输入元素具有焦点，请检查是否按下了输入，是否移动到下一个任意元素
- 在任何其他情况下，只需让密钥执行其意图

我当前的代码

form.component.html

<form>
      <input type="text" class="form-control" id="el1" name="el1"
             required focus
             [(ngModel)]="el1" #el1
             (keydown)="processEl1KeyDown($event)"
      >
      <input type="text" class="form-control" id="el2" name="el2"
             required
             [(ngModel)]="el2" #el2
             (keydown)="processEl2KeyDown($event)"
      >
</form>

form.component.ts

@Component({
    selector: 'my-form',
    templateUrl: 'app/form.component.html'
})
export class FormComponent {

    constructor(private renderer:Renderer) {
    }

    el1: string;
    el2: string

    @ViewChild("el1")
    el1El: ElementRef;

    @ViewChild("el2")
    el2El: ElementRef;


    @HostListener('document:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (!this.el1) {
            this.setFocus(this.el1El);
        } else {
            this.setFocus(this.el2El);
        }
    }


    processEl1KeyDown(event: KeyboardEvent) {
        event.stopPropagation();
        if (event.keyCode == 13) {
            this.setFocus(this.el2El);
        }
    }


    processEl2KeyDown(event: KeyboardEvent) {
        event.stopPropagation();
        if (event.keyCode == 13) {
            this.submitForm();
        }
    }

    submitForm() {
        console.log("submit form");
    }

    setFocus(element: ElementRef) {
        this.renderer.invokeElementMethod(element.nativeElement, 'focus');
    }
}

问题

如何从FormComponent类中获取焦点元素的模板变量名称（例如＃el1，＃el2）？ document.activeElement返回DOM元素。
我可以从DOM获取Angular2对象吗？像ElementRef.create('<div></div>')
如果我想将任意字符串传递给我的setFocus('el1')函数，我该如何构建ElementRef？我可以使用@ViewChild装饰器，但我需要一些可以在运行时定义的东西？比如新ViewChild('el1')
什么会更“解决我的问题”的“Angular2”方式？使用此答案中提到的BehaviorSubject - Delegation: EventEmitter or Observable in Angular2？

修改

也许问题不够明确。总结一下：如果我有n个输入元素（el1，el2 ... eln），我怎么知道模块中哪个元素有焦点（可能是通过模板变量），然后将焦点移动到另一个元素（通过字符串，再次对应另一个模板变量）。我想我正在考虑angular.element等效 - Get ComponentRef from DOM element，但我相信这可能不是正确的方法。

Answer 1

我认为焦点指令可能会解决您列出的大部分问题。我遇到了类似的问题并编写了这个指令来解决它们：

@Directive
({
    selector: '[hasFocus]'
})

export class HasFocusDirective
{
    @Input("hasFocus") hasFocus: boolean;
    constructor(private elementRef: ElementRef) {}

    ngAfterViewInit()
    {
        if (this.hasFocus)
        {
            this.elementRef.nativeElement.focus();
        }
    }

    ngOnChanges(changes: SimpleChanges)
    {
        if (changes["hasFocus"] && changes["hasFocus"].currentValue === true)
        {
            this.elementRef.nativeElement.focus();
        }
    }
}

[hasFocus]是一个布尔值，您可以使用任何布尔表达式来动态控制使用它的元素的焦点。

如何将焦点放在表单元素上的Angular方式

1 个答案: