angular2 – Angular 2：聚焦于新添加的输入元素

发布时间：2020-12-17 08:45:00 所属栏目：安全来源：网络整理

导读：我有一个新的Angular 2应用程序与输入框列表。当用户点击返回键时，我在他们当前编辑的那个之后立即添加一个新的输入框。或者，我(异步地)向模型中的数组添加一个新条目，这将导致Angular 2在不久的将来自动生成一个新的输入框。如何使输入焦点自动更改为新

我有一个新的Angular 2应用程序与输入框列表。当用户点击返回键时，我在他们当前编辑的那个之后立即添加一个新的输入框。或者，我(异步地)向模型中的数组添加一个新条目，这将导致Angular 2在不久的将来自动生成一个新的输入框。

如何使输入焦点自动更改为新添加的元素？

或者，我获得对引起DOM生成的模型对象的引用。从组件代码，是否有一种方法来搜索表示特定模型对象的DOM元素？

这里是我的代码，只是使这项工作。希望这是冒犯足够一些Angular 2 devs鼓励回复:-)

app.WordComponent = ng.core
    .Component({
        selector: 'word-editor',template:'<input type="text" [value]="word.word" (input)="word.update($event.target.value)" (keydown)="keydown($event)"/>',styles:[
            ''
        ],properties:[
            'list:list','word:word'
        ]
    })
    .Class({
        constructor:[
            function() {
            }
        ],keydown:function(e) {
            if(e.which == 13) {
                var ul = e.target.parentNode.parentNode.parentNode;
                var childCount = ul.childNodes.length;

                this.list.addWord("").then(function(word) {
                    var interval = setInterval(function() {
                        if(childCount < ul.childNodes.length) {
                            ul.lastChild.querySelector('input').focus();
                            clearInterval(interval);
                        }
                    },1);
                });
            }
        }
    });

如果我允许这样做，我将参加@Sasxa答案，并修改它，使它更像你要找的。

几个变化

>我将使用ngFor，因此angular2添加新的输入，而不是自己做。主要目的是让angular2遍历它。
> Intead ViewChild我将使用ViewChildren返回一个QueryList属性的QueryList。此属性是一个Observable，它会在元素更改后返回。

因为在ES5中，我们没有装饰器，我们必须使用queries属性来使用ViewChildren

零件

Component({
    selector: 'cmp',template : `
        <div>
            // We use a variable so we can query the items with it
            <input #input (keydown)="add($event)" *ngFor="#input of inputs">
        </div>
    `,queries : {
        vc : new ng.core.ViewChildren('input')
    }
})

专注于最后一个元素。

ngAfterViewInit: function() {

    this.vc.changes.subscribe(elements => {
        elements.last.nativeElement.focus();
    });

}

像我之前说的，ViewChildren返回一个包含changes属性的QueryList。当我们订阅它每次它改变它将返回元素的列表。列表元素包含最后一个属性(在其他情况下)，在这种情况下返回最后一个元素，我们使用nativeElement，最后focus()

添加输入元素这是为了纯粹的目的，输入数组没有真正的目的多于重绘ngFor。

add: function(key) {
    if(key.which == 13) {
        // See plnkr for "this.inputs" usage
        this.inputs.push(this.inputs.length+1);
    }
}

我们在数组上推一个虚项，以便重绘。

示例使用ES5：http://plnkr.co/edit/DvtkfiTjmACVhn5tHGex

示例使用ES6 / TS：http://plnkr.co/edit/93TgbzfPCTxwvgQru2d0?p=preview

更新29/03/2016

时间已经过去，事情已经澄清，总是有最好的做法来学习/教导。我已经通过改变一些东西简化了这个答案

>而不是使用@ViewChildren和订阅它，我做了一个指令，每当一个新的输入创建的instatiated
>我使用渲染器使其WebWorker安全。原始答案直接访问focus()直接对不鼓励的nativeElement。
>现在我听了keydown.enter这简化了key down事件，我不必检查哪个值。

到了点。组件看起来像(简化，在下面的plnkrs的完整代码)

@Component({
  template: `<input (keydown.enter)="add()" *ngFor="#input of inputs">`,})

add() {
    this.inputs.push(this.inputs.length+1);
}

和指令

@Directive({
  selector : 'input'
})
class MyInput {
  constructor(public renderer: Renderer,public elementRef: ElementRef) {}

  ngOnInit() {
    this.renderer.invokeElementMethod(
      this.elementRef.nativeElement,'focus',[]);
  }
}

正如你可以看到，我调用invokeElementMethod触发焦点在元素，而不是直接访问它。

这个版本比原来更干净，更安全。

plnkrs更新到beta 12

示例使用ES5：http://plnkr.co/edit/EpoJvff8KtwXRnXZJ4Rr

示例使用ES6 / TS：http://plnkr.co/edit/em18uMUxD84Z3CK53RRe

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!