angular - 专注于新添加的输入元素

Question

我有一个新的 Angular 2 应用程序，其中包含一个 input 框列表。当用户按下返回键时，我会在他们当前正在编辑的框之后立即添加一个新的 input 框。或者更确切地说，我(异步地)向模型中的数组添加一个新条目，这会导致 Angular 2 在不久的将来自动生成一个新的 input 框。

如何使 input 焦点自动更改到新添加的元素？

编辑 1:
或者，我获得了对导致生成 DOM 的模型对象的引用。从组件代码中，有没有办法搜索表示特定模型对象的 DOM 元素？

编辑 2:
这是我的代码来完成这项工作。希望这对某些 Angular 2 开发人员来说足够冒犯，以鼓励他们回复 :-)

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);
                });
            }
        }
    });

Answer 1

如果我被允许这样做，我将对@Sasxa 的回答进行部分修改，使其更像您正在寻找的内容。

一些变化

• 我将使用 ngFor 以便 angular2 添加新的输入而不是自己做。主要目的只是让 angular2 对其进行迭代。
• 我将使用返回 QueryList 的 ViewChildren 而不是 ViewChild它有一个 changes属性(property)。此属性是一个 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。当我们每次更改时订阅它时，它将返回元素列表。列表 elements 包含一个 last 属性(以及其他)，在这种情况下返回最后一个元素，我们在其上使用 nativeElement 最后 焦点()

添加输入元素 这纯粹是为了方便，输入数组除了重绘 ngFor 之外没有其他实际用途。

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

我们将一个dummy 项压入数组，以便它重绘。

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

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

2016 年 3 月 29 日更新

时间过去了，事情已经澄清，总有最佳实践可供学习/教授。我通过改变一些东西简化了这个答案

• 我没有使用 @ViewChildren 并订阅它，而是创建了一个指令，每次创建新输入时都会实例化该指令
• 我正在使用 Renderer 来保证 WebWorker 的安全。原始答案直接在 nativeElement 上访问 focus()，这是不鼓励的。
• 现在我听 keydown.enter 简化了按键事件，我不必检查 which 值。

说到点子上。该组件看起来像(下面 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 来触发元素上的 focus，而不是直接访问它。

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

plnkrs 更新到 beta 12

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

使用 ES6/TS 的例子:http://plnkr.co/edit/em18uMUxD84Z3CK53RRe

2018 年更新

invokeElementMethod 已弃用。使用 Renderer2 而不是 Renderer。

给你的元素一个id，你可以使用selectRootElement :

this.renderer2.selectRootElement('#myInput').focus();