angular - トランスクルージョンされたコンテンツへの参照を取得する方法

Question

DropdownComponentトランスクルードされたボタン (または他の適切な要素または Angular コンポーネント) がドロップダウンをトリガーできるようにする と、ドロップダウンに表示する必要があるコンテンツのトランスクルードされた div を実装しようとしています。このコンポーネントの使用方法は次のようになります。

<dropdown>
  <button origin>drop</button>
  <div content>
    <!-- some content -->
  </div>
</dropdown>

DropdownComponentカスタムCSSクラスをバインドするには、そのボタンへの参照を取得する必要があります。

次のように、上記のコードに css クラスを追加し、 を使用してその参照を取得できますgetElementsByClassName()。

<dropdown>
  <button origin class="dropdown-origin">drop</button>
  <div content>
    <!-- some content -->
  </div>
</dropdown>

しかし、より簡単に使用できるようにするために、コンテンツを透過してボタンへの参照を取得するために使用される属性DropdownComponentを使用したいと思います。originこのようなもの、

@ContentChild('[origin]') origin;

これを達成する方法はありますか？または、これを行うより良い方法はありますか？

注: 私のドロップダウン html は次のとおりです。

<ng-content select="[origin]"></ng-content>

<div class="dropdown-content">
  <ng-content select="[content]"></ng-content>
</div>