为什么 (focus) 在这个 angular2 示例中不起作用？答案

【问题标题】：Why does (focus) doesn' t work in this angular2 example?为什么 (focus) 在这个 angular2 示例中不起作用？
【发布时间】：2016-04-12 06:04:57
【问题描述】：

这里是plunker 用于测试

 @Component({
   selector: 'test-app'
   template:`
    <h1>AngularJs 2 Material Design Demo</h1>
    <md-input-container>
      <label>Your name</label>
      <input #newname />

    </md-input-container>
    <p (click)="test()" (focus)="test2()">
      Hello, {{newname.value}}
    </p>
  `,
  directives: [MdInputContainer, MdInput]
})

class TestApp {
  constructor(){
    this.title = 'AngularJs 2 Material Design Demo';
  }
  test() {

    console.log('test');
  }
  test2() {
    console.log('test2');
  }
}

在上面的示例中，我将(click) 和(focus) 添加到<p> 元素中。

<p (click)="test()" (focus)="test2()">

但是我们可以看到只有click 事件被传播，而focus 事件没有被传播。我是否以错误的方式使用焦点？

任何建议将不胜感激。

谢谢

【问题讨论】：

在编辑中我删除了@View，因为在beta angular2中不再使用@view

标签： javascript typescript angular

【解决方案1】：

p（段落）或div 标记无法获得焦点。焦点只能应用于您可以与之交互的事物，例如链接（锚点）、输入元素、文本区域、按钮等

在p 标签上添加tabindex 属性以接收此元素上的焦点事件，在p 标签上添加tabindex="0" 使其工作。通过保持tabindex 到0，它将确保执行焦点，元素在DOM 上的顺序。

标记

<h1>AngularJs 2 Material Design Demo</h1>
<md-input-container>
  <label>Your name</label>
  <input #newname tabindex="0"/>

</md-input-container>
<p (click)="test()" (focus)="test2()" tabindex="0">
  Hello, {{newname.value}}
</p>

Demo Plunkr

不要使用@View注解，它已经被弃用了。

【讨论】：