Angular2：子コンポーネントのViewChildへの参照を取得する方法

Question

別のコンポーネント（Comp）を含むコンポーネント（App）があります。 Appは、データベースから文字列コンテンツを取得し、@Input()〜Compに転送します。この文字列の内容は、このコンテンツをレンダリングすることになっていると、いくつかのイベントリスナーを追加することになっているCompで

Some text before <a>Click</a> Some Text after 

のようなHTMLタグを含めることができます。そのため、このコンテンツは[innerHtml]を使用して追加されます。 [innerHtml]では(click)が削除されているので、aタグへの参照が必要であり、イベントリスナーはaddEventListenerで追加されるはずです。しかし、コンポーネントにElementRefにはnativeElementが含まれていないため、aタグを参照する方法が見つかりません。

このプランナーを実行するにはどのような方法が最適ですか？ https://plnkr.co/edit/xVUu0LJ02YVnBO25Zr4j?p=preview

Answer 1

直接DOMアクセスはd Angular2で推奨されています

ここでは、ダイレクトアクセスでハッキングする方法があります。

は、子コンプでイベントリスナーを定義し、イベントをフィルタリング：

document.querySelector('body').addEventListener('click', function(event) { 
     if (event.target.tagName.toLowerCase() === 'a') { 
     that.updateCounter.next(true); 
     } 
    }); 

、カウンタを更新するために、EventEmitterを使用しています。

plunker：https://plnkr.co/edit/vm44niH781j4mEQHDpLU?p=preview

Answer 2

Angular2では、ネストされたコンポーネントが直接の親子にしか通信しないようにしたいとします。

コンポーネント "Comp"の "a"タグのクリックハンドラを作成できます。コンポーネントのコンプで

、あなたがメインのアプリコンポーネントでは、あなたのクリックハンドラ

に発火すること、@output（）変数（基本的に持つEventEmitter）を作成することができ、あなたの新しい持つEventEmitterに耳を傾けることができ、イベントを処理します。例えば

：コンプで

：アプリケーションのコンポーネントで

@Output myClickEventEmitter: EventEmitter 

aTagClickHandler (e) { 
    myClickEventEmitter.emit(e) 
} 

アプリテンプレートで

：

myCompClickHandler(e) { 
    console.log(e); 
} 

私は私の構文が正しい時間であると思いますそれは助けとなった。

EDIT：

あなたはまた、そのようなあなたのタグで#variableName属性を使用して、内部コンポーネントを参照することができる必要があります：テンプレートで

：コンポーネントで

<a #variableName > </a> 

：

@ViewChild('variableName') myATag;