如何获取对已转换内容的引用

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>