なぜ、（focus）はこのangular2の例では機能しませんか？ここ

Question

は、上記の例で

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

をテストするためplunkerであり、Iは、<p>要素に(click)と(focus)を加えました。

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

しかし、我々はfocusイベントが伝播されていない間だけclickイベントは、伝播していることがわかります。間違った方法で焦点を当てていますか？

アドバイスをいただければ幸いです。

おかげ

Answer 1

p（段落）またはdivタグがフォーカスを受け取ることができません。焦点は唯一p上tabindex="0"を追加し、この要素の上にフォーカスイベントを受け取るためにtabindex属性タグp上を追加

など、リンク（アンカー）、入力要素、テキストエリア、ボタンのように、あなたと対話できるものに適用することができタグを使用するようにしてください。 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アノテーションを使用しないでください、それはすでに廃止されました。