专注于新添加的输入元素

正如您所看到的,我正在调用invokeElementMethod触发focus元素而不是直接访问它.

这个版本比原版更清洁,更安全.

plnkrs更新为beta 12

使用ES5的示例:http://plnkr.co/edit/EpoJvff8KtwXRnXZJ4Rr

使用ES6/TS的示例:http://plnkr.co/edit/em18uMUxD84Z3CK53RRe

invokeElementMethod已弃用.使用Renderer2而不是Renderer.

为您的元素指定一个id,您可以使用selectRootElement:

this.renderer2.selectRootElement('#myInput').focus();

Sasxa.. 40

看看ViewChild,这是一个例子.这可能是你正在寻找的:

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

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    

      
    
  `,
  directives: []
})
export class App {

  @ViewChild('name') vc: ElementRef;

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

surfealokese.. 24

使用内联角度代码,在条件绘制后聚焦:

  
    
    Save
    Cancel
    {{taskEditText.focus()}}
  

pixelbits.. 9

您可以实现一个简单的输入文本指令,这样无论何时创建新输入,它都会自动对焦.在视图完全初始化之后focus(),在ngAfterViewInit()组件生命周期钩子内部调用该方法.

@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: `{{words |json}}`
})
export class AppComponent {
    words: Word[] = [];
    constructor() {
        this.addNewWord();
    }
    addNewWord() {
        this.words.push(new Word());
    }
}

请注意以下事项:

该(keyup.enter)事件用于检测何时按下键

ngFor 用于重复数组中每个单词的输入元素 words

last 是绑定到局部变量的布尔值,当输入是最后一个时,该变量为true

keyup事件绑定到表达式last ? addNewWord() : 0.这可确保仅在从最后一个输入按下键时添加新的输入字段

演示Plnkr

如果我被允许这样做,我将参加@Sasxa的答案并修改它,使其更像你正在寻找的.

一些变化

我将使用一个ngFor如此angular2添加新的输入而不是自己做.主要目的是让angular2迭代它.

而不是ViewChild我要使用ViewChildren它返回一个具有属性的QueryListchanges.此属性是一个Observable,它在更改后返回元素.

因为在ES5中,我们没有装饰器,所以我们必须使用该queries属性ViewChildren

零件

Component({
    selector: 'cmp',
    template : `
        

            // We use a variable so we can query the items with it
            
        
    `,
    queries : {
        vc : new ng.core.ViewChildren('input')
    }
})

专注于最后一个元素.

ngAfterViewInit: function() {

    this.vc.changes.subscribe(elements => {
        elements.last.nativeElement.focus();
    });

}

add: function(key) {
    if(key.which == 13) {
        // See plnkr for "this.inputs" usage
        this.inputs.push(this.inputs.length+1);
    }
}

@Component({
  template: ``,
})

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', []);
  }
}

this.renderer2.selectRootElement('#myInput').focus();

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

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    

      
    
  `,
  directives: []
})
export class App {

  @ViewChild('name') vc: ElementRef;

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

  
    
    Save
    Cancel
    {{taskEditText.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: `{{words |json}}`
})
export class AppComponent {
    words: Word[] = [];
    constructor() {
        this.addNewWord();
    }
    addNewWord() {
        this.words.push(new Word());
    }
}