相关疑难解决方法(0)

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

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

[edit]或者,我得到了一个引起DOM生成的模型对象的引用.从组件代码中,有没有办法搜索表示特定模型对象的DOM元素？

[编辑]这是我的代码,使这项工作.希望这对一些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);
                });
            }
        }
    });

在方法结束时,我将清除一些字段,这很容易:

this.modelname.fieldname1 = "";
this.modelname.fieldname2 = "";

清除字段后,我希望光标出现在field1.

有没有Angular2方法来做到这一点,或者我只是使用旧式的Javascript？

我试图用Renderer.selectRootElement摆脱我的组件的一些元素,如所描述这里.

除非我只选择一个元素(plnkr),否则一切正常.

如您所见,我创建了一个组件:

export class ExampleComponent implements OnInit{
    @Input() start: any;
    @Input() end: any;

  constructor(public _renderer:Renderer){

  };

    ngOnChanges(){

    }
    ngOnInit(){
        console.log("NG ON CHAN START DATE",this.start);
        console.log("NG ON INIT END DATE",this.end);
        var container =  this._renderer.selectRootElement('.container');
        console.log(container);   
        var inner1 =  this._renderer.selectRootElement('.inner1');
        console.log(inner1);   
        var inner2 =  this._renderer.selectRootElement('.inner2');
        console.log(inner2);   
    }

}

当我尝试运行它时,我有一个错误:

EXCEPTION:选择器".inner1"与MainViewComponent @ 3:65中[{{exampleData.end}}中的任何元素都不匹配]

(但是,在我的应用程序中,当只找到第一个容器时,则找不到其他容器).

这有什么想法来自哪里？

UPDATE

我发现该指令未被完全调用 - 只有带有类的div container被添加到HTML中.