1

我正在尝试实现一个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>
4

0 回答 0