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

前端之家收集整理的这篇文章主要介绍了angular2 – 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

原文链接:https://www.f2er.com/angularjs/146045.html

猜你在找的Angularjs相关文章