或者,我获得对引起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); }); } } });
几个变化
>我将使用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