Componentに投影されたすべての要素への参照を取得するにはどうすればよいですか？

Question

コンポーネントに投影されたすべての要素への参照を取得するにはどうすればよいですか？今、私は私のTestComponent内でこれらのリンクや画像（および潜在的に他の要素タイプ）への参照を取得する方法

@Component({ 
    selector: 'test', 
    template: '<ng-content></ng-content>' 
}) 
class TestComponent {} 

@Component({ 
    selector: 'app', 
    template: ` 
    <test> 
     <img src="http://example.org/1.jpg"> 
     <a href="http://example.org">Some Link</a> 
    </test> 
    `, 
    directives: [ TestComponent ] 
}) 
export class AppComponent {} 

：

はのは、私はTestComponentにいくつかのリンクや画像を投影しAppComponentがあるとしましょうか？

ソリューション：this postを読む

は、以下の示唆

のliセレクターでContentChildren +ディレクティブを一つの優れたソリューションを @Directiveデコレータでセレクタを利用することです。 <l>要素を選択するディレクティブを定義し、@ContentChildrenクエリを使用してl> 要素を コンポーネントの子要素のみにフィルタリングします。

しかし、これは1つの要素タイプを取得したい場合にのみ機能しますが、複数のタイプを取得したい場合、それぞれのタイプのディレクティブを作成する必要があります。タイプ？）...これは実用的な方法のように感じません。

別の方法がありますか？または直接のDOM操作はこの場合の唯一の解決策ですか？

Answer 1

あなたはこのようなディレクティブに複数のセレクタを使用して試すことができます：

@Directive({ selector: 'a, img' }) 

角度だけディレクティブは、要素の境界を越えていないCSSセレクタでトリガすることができます。

• element-name：：だからselectorは、次のいずれかのように宣言することができる要素名で選択します。
• .class：クラス名で選択してください。
• [attribute]：属性名で選択します。
• [attribute=value]：属性名と値で選択します。
• :not(sub_selector)：要素がsub_selectorと一致しない場合にのみ選択します。
• selector1, selector2：selector1またはselector2のいずれかが一致する場合に選択します。