如何影响使用@HostBinding 的指令子项？

Question

我正在实现 bootsrap 的单按钮下拉菜单 (docs)。

为了使其“打开”，它必须添加一个 show class 到 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 class 添加到 <div> 而不能将其添加到 <ul>， 有没有办法影响指令 children?

这是一个StackBlitz

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

Answer 1

我在寻找同一问题的答案时遇到了这个 post。我使用 ElementRef 自己解决了这个问题。我是 Angular 的新手，但来自 React 背景我认为如果元素 ref 中的 'Ref' 类似于 React 中的 Refs 那么它应该具有 HTML 属性和属性，特别是 querySelector .

因此，如果其他人对此感到困惑，这可以作为解决方案。

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

@Directive({
  selector: '[appDropdown]',
})
export class DropdownDirective {
  constructor(private dropdownRef: ElementRef<HTMLElement>) {}

  @HostListener('click') toggleOpen = () => {
    this.dropdownRef.nativeElement
      .querySelector('div')
      .classList.toggle('hidden');
  };
}

如何影响使用@HostBinding 的指令子项？

How to affect the directive children using @HostBinding?

angular-directive

bootstrap-4

angular