相关疑难解决方法(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);
                });
            }
        }
    });

我想使用 tab 键来执行一些逻辑，但实际上并不改变焦点。根据此答案的评论，我可以在标记中使用false或在方法中使用preventDefault()。我两个都是这样的。

onKey(event: KeyboardEvent) { 
  event.preventDefault();
  if(event.key = "Tab") { this.update.emit(this.config); }
}

<input #input
   title="{{config|json}}"
   value="{{config.value}}"
   (keyup)="onKey($event)"
   (keydown.Tab)="onKey($event);false;">

尽管如此，当我按下 Tab 键时它会得到额外的跳跃。当我尝试基于其他键（例如“ a ”或“ enter ”）的完全相同的逻辑时，行为符合预期，因此我得出结论，该逻辑是正确的。出于某种原因，按制表符是不守规矩的，并且传播事件就好像我想两次制表符一样。

我是否错误地处理了 Tab 键？除了我已经拥有的之外，不知道谷歌搜索什么。

我正在使用 mat-menu 来显示表单，并且需要在选项卡按键事件的输入之间更改焦点。但是当我按 Tab 时，垫菜单会关闭。

例子：

https://stackblitz.com/edit/angular-u5qbkt?file=src%2Fapp%2Fapp.module.ts