Javascript 为什么（焦点）没有'；在这个angular2示例中不起作用？

这是测试用的

 @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');
  }
}

但是，我们可以看到，只有

单击

事件被传播，而

焦点

事件没有被传播。我使用焦点的方式不对吗

如有任何建议，将不胜感激

谢谢

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>

AngularJs 2材料设计演示 你的名字 您好，{{newname.value}

不要使用

@View

注释，它已被弃用

---

在编辑中，我删除了

@View

，因为在beta angular2中不再使用@View

<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>