我有一个新的Angular 2应用程序与输入框列表。当用户点击返回键时,我在他们当前编辑的那个之后立即添加一个新的输入框。或者,我(异步地)向模型中的数组添加一个新条目,这将导致Angular 2在不久的将来自动生成一个新的输入框。
@H_301_1@如何使输入焦点自动更改为新添加的元素?
@H_301_1@或者,我获得对引起DOM生成的模型对象的引用。从组件代码,是否有一种方法来搜索表示特定模型对象的DOM元素?
@H_301_1@这里是我的代码,只是使这项工作。希望这是冒犯足够一些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答案,并修改它,使它更像你要找的。
@H_301_1@几个变化
@H_301_1@>我将使用ngFor,因此angular2添加新的输入,而不是自己做。主要目的是让angular2遍历它。
> Intead ViewChild我将使用ViewChildren返回一个QueryList属性的QueryList。此属性是一个Observable,它会在元素更改后返回。 @H_301_1@因为在ES5中,我们没有装饰器,我们必须使用queries属性来使用ViewChildren @H_301_1@零件
>我使用渲染器使其WebWorker安全。原始答案直接访问focus()直接对不鼓励的nativeElement。
>现在我听了keydown.enter这简化了key down事件,我不必检查哪个值。 @H_301_1@到了点。组件看起来像(简化,在下面的plnkrs的完整代码)
> Intead ViewChild我将使用ViewChildren返回一个QueryList属性的QueryList。此属性是一个Observable,它会在元素更改后返回。 @H_301_1@因为在ES5中,我们没有装饰器,我们必须使用queries属性来使用ViewChildren @H_301_1@零件
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') } })@H_301_1@专注于最后一个元素。
ngAfterViewInit: function() { this.vc.changes.subscribe(elements => { elements.last.nativeElement.focus(); }); }@H_301_1@像我之前说的,ViewChildren返回一个包含changes属性的QueryList。当我们订阅它每次它改变它将返回元素的列表。列表元素包含最后一个属性(在其他情况下),在这种情况下返回最后一个元素,我们使用nativeElement,最后focus() @H_301_1@添加输入元素这是为了纯粹的目的,输入数组没有真正的目的多于重绘ngFor。
add: function(key) { if(key.which == 13) { // See plnkr for "this.inputs" usage this.inputs.push(this.inputs.length+1); } }@H_301_1@我们在数组上推一个虚项,以便重绘。 @H_301_1@示例使用ES5:http://plnkr.co/edit/DvtkfiTjmACVhn5tHGex @H_301_1@示例使用ES6 / TS:http://plnkr.co/edit/93TgbzfPCTxwvgQru2d0?p=preview @H_301_1@更新29/03/2016 @H_301_1@时间已经过去,事情已经澄清,总是有最好的做法来学习/教导。我已经通过改变一些东西简化了这个答案 @H_301_1@>而不是使用@ViewChildren和订阅它,我做了一个指令,每当一个新的输入创建的instatiated
>我使用渲染器使其WebWorker安全。原始答案直接访问focus()直接对不鼓励的nativeElement。
>现在我听了keydown.enter这简化了key down事件,我不必检查哪个值。 @H_301_1@到了点。组件看起来像(简化,在下面的plnkrs的完整代码)
@Component({ template: `<input (keydown.enter)="add()" *ngFor="#input of inputs">`,}) add() { this.inputs.push(this.inputs.length+1); }@H_301_1@和指令
@Directive({ selector : 'input' }) class MyInput { constructor(public renderer: Renderer,public elementRef: ElementRef) {} ngOnInit() { this.renderer.invokeElementMethod( this.elementRef.nativeElement,'focus',[]); } }@H_301_1@正如你可以看到,我调用invokeElementMethod触发焦点在元素,而不是直接访问它。 @H_301_1@这个版本比原来更干净,更安全。 @H_301_1@plnkrs更新到beta 12 @H_301_1@示例使用ES5:http://plnkr.co/edit/EpoJvff8KtwXRnXZJ4Rr @H_301_1@示例使用ES6 / TS:http://plnkr.co/edit/em18uMUxD84Z3CK53RRe