使用Enter键按下Angular 2专注于下一个输入字段

问题描述

我是Angular 2的新手.如何在Angular 2中将焦点移至键输入的下一个控件.我，但是如何无法正常工作.请建议我该怎么做.谢谢

I am new in angular 2. How can I move focus to next control on key enter in Angular 2. I implement this code but how not working properly. Please suggest me how I do this. Thanks

我的组件代码

import { Component,Injectable,Inject,OnInit, OnDestroy, EventEmitter, Output, Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
import {Http, Response} from '@angular/http';
import {TestService} from '../../services/test.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { RouterModule } from '@angular/router';
import { ActivatedRoute,Params } from '@angular/router';

@Component({
    selector : 'test_block',
    templateUrl : './partials/test_block.html',
    providers: [TestService]
})
@Directive({
    selector: '[test_block]'
})

export class TestComponent {


    private el: ElementRef;
    @Input() test_block: any;
    branch_outstanding:any = [];
    charges:any = [];

    searched_charges:any = [];

    constructor(private test_service:TestService,  @Inject(ActivatedRoute) private route: ActivatedRoute, private _el: ElementRef,public renderer: Renderer) {
        this.el = this._el;
    }

    @HostListener('keydown', ['$event']) onKeyDown(e:any) {
        if ((e.which == 13 || e.keyCode == 13)) {
            e.preventDefault();
            let control:any;
            control = e.srcElement.nextElementSibling;
            while (true){
                if (control) {
                  if ((!control.hidden) &&
                     (control.nodeName == 'INPUT' ||
                      control.nodeName == 'SELECT' ||
                      control.nodeName == 'BUTTON' ||
                      control.nodeName == 'TEXTAREA'))
                     {
                            control.focus();
                            return;
                        }else{
                            control = control.nextElementSibling;
                        }
                }
                else {
                    console.log('close keyboard');
                    return;
                }
            }
        }
    }
}

在控制台中显示错误:

我不知道此代码有什么问题.请建议我.

I don't know what is issue on this code. Please suggest me.

推荐答案

最终得到了解决方案

1. 我为TestComponent提到了@Component和@Directive创建了两个不同的装饰器.
2. 在@Directive之后，我像这样导入我的test.module.ts
import { TestDirective } from './test.directive';
3. 这在html绑定<input test_block type="text">中非常重要，如果您未绑定test_block则代码无法正常工作

1. I created two different decorators for TestComponent mention @Component and @Directive.
2. After that @Directive I import in to my test.module.ts like this
   import { TestDirective } from './test.directive';
3. It's very important in html bind <input test_block type="text"> if you not bind test_block then code not working properly

这篇关于使用Enter键按下Angular 2专注于下一个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！