Angular 关注新添加的输入元素

我有一个新的Angular 2应用程序，有一个

输入框列表。当用户点击返回键时，我会在他们当前编辑的框之后立即添加一个新的
输入框。或者更确切地说，我（异步地）向模型中的数组添加一个新条目，这会导致Angular 2在不久的将来自动生成一个新的
输入
框

如何使
input
focus自动更改新添加的元素

编辑1:

或者，我得到一个对导致生成DOM的模型对象的引用。从组件代码中，是否有方法搜索表示特定模型对象的DOM元素

编辑2:

这是我的代码，让这一切顺利进行。希望这对一些有棱角的2开发人员来说是足够的冒犯，以鼓励他们回答：-）

app.WordComponent=ng.core
.组成部分({
选择器：“word编辑器”，
模板：“”，
风格：[
''
],
特性：[
'列表：列表'，
“字：字”
]
})
.类({
建造商：[
函数（）{
}
],
向下键：功能（e）{
如果（e.which==13）{
var ul=e.target.parentNode.parentNode.parentNode；
var childCount=ul.childNodes.length；
this.list.addWord（“”）。然后（函数（word）{
var interval=setInterval（函数（）{
if（childCount
看看，这里有一个。
这可能是您正在寻找的：

import {Component, ViewChild} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <input #name>
    </div>
  `,
  directives: []
})
export class App {

  @ViewChild('name') vc: ElementRef;

  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}


从'angular2/core'导入{Component，ViewChild}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
`,
指令：[]
})
导出类应用程序{
@ViewChild（'name'）vc:ElementRef；
ngAfterViewInit（）{
this.vc.nativeElement.focus（）；
}
}
如果允许我这样做，我将参与@Sasxa answer并对其进行修改，使其更像您正在寻找的内容

一些变化


我将使用
ngFor
，因此angular2添加新输入，而不是自己添加。主要目的是使angular2在其上迭代
我将使用
ViewChildren
来代替
ViewChildren
，它返回一个具有属性的。此属性是可观察的，它在元素更改后返回元素

因为在ES5中，我们没有装饰器，所以我们必须使用
查询
属性来使用
查看子项

组件

正如我前面所说，ViewChildren返回一个包含
changes
属性的QueryList。当我们每次订阅它时，它都会返回元素列表。列表
elements
包含一个
last
属性，在本例中，该属性返回最后一个元素，我们对其使用
nativeElement
，最后使用
focus（）

添加输入元素这纯粹是为了方便起见，输入数组除了重新绘制
ngFor
之外没有任何实际用途

添加：功能（键）{
if（key.which==13）{
//有关“this.inputs”的用法，请参见plnkr
this.inputs.push（this.inputs.length+1）；
}
}

我们在数组上推送一个虚拟项，使其重新绘制

使用ES5的示例：

使用ES6/TS的示例：

更新日期：2016年3月29日
时间已经过去，事情已经澄清，总是有最佳实践需要学习/教授。我通过改变一些东西简化了这个答案


我没有使用
@ViewChildren
并订阅它，而是创建了一个指令，每当创建新输入时，该指令都会被安装
我正在使用
渲染器
来确保WebWorker的安全。原始答案直接访问
nativeElement
上的
focus（）

现在我听
keydown。输入
简化了按键事件，我不必检查
哪个
值

切中要害。该组件看起来像（以下PLNKR上的简化完整代码）

@组件({
模板：``，
})
添加（）{
this.inputs.push（this.inputs.length+1）；
}

指令呢

@指令({
选择器：“输入”
})
类MyInput{
构造函数（公共呈现器：呈现器，公共elementRef:elementRef）{}
恩戈尼尼特（）{
this.renderer.invokeElementMethod(
this.elementRef.nativeElement，'焦点'，[]）；
}
}

如您所见，我正在调用
invokeElementMethod
来触发元素上的
focus
，而不是直接访问它

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

plnkrs更新为beta 12版

使用ES5的示例：

使用ES6/TS的示例：

2018年更新
invokeElementMethod
已弃用。使用渲染器2而不是渲染器

为元素提供一个id，您可以使用：

您可以实现一个简单的输入文本指令，这样每当创建一个新的输入时，它就会自动聚焦。视图完全初始化后，
focus（）

@Directive({
    selector: 'input[type=text]'
})
export class FocusInput implements AfterViewInit {
    private firstTime: bool = true;
    constructor(public elem: ElementRef) {
    }

    ngAfterViewInit() {
      if (this.firstTime) {
        this.elem.nativeElement.focus();
        this.firstTime = false;
      }
    }
}

在组件中使用
FocusInput
指令：

@Component({
    selector: 'app',
    directives: [FocusInput],
    template: `<input type="text" (keyup.enter)="last ? addNewWord():0" 
                *ngFor="#word of words; #last = last" [value]="word.word" 
                #txt (input)="word.word = txt.value" />{{words |json}}`
})
export class AppComponent {
    words: Word[] = [];
    constructor() {
        this.addNewWord();
    }
    addNewWord() {
        this.words.push(new Word());
    }
}

@组件({
选择器：“应用程序”，
指令：[聚焦输入]，
模板：`{words | json}}`
})
导出类AppComponent{
单词：单词[]=[]；
构造函数（）{
this.addNewWord（）；
}
addNewWord（）{
this.words.push（新词（））；
}
}

注意以下几点：

（keyup.enter）
ev
this.renderer2.selectRootElement('#myInput').focus();

@Directive({
    selector: 'input[type=text]'
})
export class FocusInput implements AfterViewInit {
    private firstTime: bool = true;
    constructor(public elem: ElementRef) {
    }

    ngAfterViewInit() {
      if (this.firstTime) {
        this.elem.nativeElement.focus();
        this.firstTime = false;
      }
    }
}

@Component({
    selector: 'app',
    directives: [FocusInput],
    template: `<input type="text" (keyup.enter)="last ? addNewWord():0" 
                *ngFor="#word of words; #last = last" [value]="word.word" 
                #txt (input)="word.word = txt.value" />{{words |json}}`
})
export class AppComponent {
    words: Word[] = [];
    constructor() {
        this.addNewWord();
    }
    addNewWord() {
        this.words.push(new Word());
    }
}

<input type="text" focusOnInit="9">

  <span *ngIf="editId==item.id">
    <input #taskEditText type="text" [(ngModel)]="editTask" (keydown.enter)="save()" (keydown.esc)="saveCancel()"/>
    <button (click)="save()">Save</button>
    <button (click)="saveCancel()">Cancel</button>
    {{taskEditText.focus()}}
  </span>