angular - 如何使用@HostBinding 影响指令子级？

Question

我正在实现 bootsrap 的单按钮下拉菜单（docs）。

为了使其“开放”，它必须show向 main<div>和<ul>.

这是关闭的：

<div class="btn-group">
  <button
      type="button"
      class="btn btn-primary dropdown-toggle">
      Manage (Using Directive) <span class="caret"></span>
    </button>
  <ul class="dropdown-menu">
    <li><a style="cursor: pointer;">Edit </a></li>
    <li><a style="cursor: pointer;">Delete </a></li>
  </ul>
</div>

这是开放的：

<div class="btn-group show">
  <button
      type="button"
      class="btn btn-primary dropdown-toggle">
      Manage (Using Directive) <span class="caret"></span>
    </button>
  <ul class="dropdown-menu show">
    <li><a style="cursor: pointer;">Edit </a></li>
    <li><a style="cursor: pointer;">Delete </a></li>
  </ul>
</div>

---

我试图让它作为一个指令工作：

<div class="btn-group" appDropdown>
  <button
      type="button"
      class="btn btn-primary dropdown-toggle">
      Manage (Using Directive) <span class="caret"></span>
    </button>
  <ul class="dropdown-menu">
    <li><a style="cursor: pointer;">Edit </a></li>
    <li><a style="cursor: pointer;">Delete </a></li>
  </ul>
</div>

还有 dropdown.directive.ts：

import { Directive, HostListener, HostBinding } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.show') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

这样我只能将show类添加到<div>而不将其添加到<ul>， 有没有办法影响指令子项？

这是一个StackBlitz

这是一个相关的问题，但它没有提到任何@HostBinding

标签： angularbootstrap-4angular-directive