Angular 6 + Bootstrap 4 使用 @HostBinding 添加“显示”类答案

【问题标题】：Angular 6 + Bootstrap 4 add "show" class with @HostBindingAngular 6 + Bootstrap 4 使用 @HostBinding 添加“显示”类
【发布时间】：2018-09-06 13:37:14
【问题描述】：

@Directive({selector: '[appDropdown]'})

export class DropdownDirective {

  @HostBinding('class.show') isShowing = false;

  @HostListener('click') toggleShow() {
    this.isShowing = !this.isShowing;
  }
}

[...]

<div class="row">
  <div class="col-md-12">
    <div class="btn-group" appDropdown role="group" aria-label="Button group 
     with nested dropdown">                                       
        <div class="btn-group" role="group">
            <button id="btnGroupDrop1" 
                    appDropdown
                    type="button" 
                    class="btn btn-primary dropdown-toggle" 
                    data-toggle="dropdown" 
                    aria-haspopup="true" 
                    aria-expanded="false">
              Manage Recipe
            </button>
            <div class="dropdown-menu" appDropdown>
                <a class="dropdown-item" href="#">Shopping List</a>
                <a class="dropdown-item" href="#">Edit Recipe</a>
                <a class="dropdown-item" href="#">Delete Recipe</a>
            </div>
        </div>
    </div>
  </div>
</div>

你好！

我目前正在学习 Angular 6，但我遇到了一个我无法理解的问题。使用 HostBinding 和 HostListener，我在 html 的不同部分添加了“show”类。前两个工作正常，点击负责按钮后，此处添加了“show”类：

<div class="btn-group" appDropdown role="group" [...]

<button id="btnGroupDrop1" appDropdown [...]

但不是第三个，这实际上很重要，因为只有那里会显示下拉菜单。这里

<div class="dropdown-menu" appDropdown>

show-class 不会被添加，我不明白为什么。我使用了 Chromes 检查工具，虽然前两个发生了变化，但第三个没有。

【问题讨论】：

标签： bootstrap-4 angular6

【解决方案1】：

尝试添加此代码

  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" appDropdown>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

在你的 index.html 中添加这些 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

【讨论】：

在 a 标签之前添加
并在 index.html 中添加 jquery cdn
为了得到一个有用的答案，这个反应需要扩展。解释为什么这是问题的答案。

【解决方案2】：

您可以使用ngClass 来解决此问题，而不是使用directive

在模板文件中

<div class="row">
  <div class="btn-group">
    <button
      class="btn btn-primary dropdown-toggle"
      [ngClass]="{'show': isShow}"
      type="button"
      (click)="onToggle()"
    >
      Options<span class="caret"></span>
    </button>
    <div class="dropdown-menu"
    [ngClass]="{'show': isShow}">
      <a class="dropdown-item" href="#">Edit</a>
      <a class="dropdown-item" href="#">Delete</a>
    </div>
  </div>
</div>

在 .ts 文件中

  isShow = false;

  onToggle() {
    this.isShow = !this.isShow;
  }

【讨论】：

【解决方案3】：

如果你想使用directive你可以使用

模板文件

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" toggleDropDown>
      Options<span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Edit</a>
      <a class="dropdown-item" href="#">Delete</a>
    </div>
  </div>

指令文件

@Directive({
    selector: '[toggleDropDown]'
})
export class DropDownDirective {

    private isShow = false;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {}


    @HostListener('document:click', ['$event']) toggleShow(event: Event) {
        const buttonGroup = this.elementRef.nativeElement;
        const dropdownMenu = this.elementRef.nativeElement.nextSibling;

        if (buttonGroup.contains(event.target)) {
            this.isShow = true;
            this.renderer.addClass(dropdownMenu, 'show');
        } else {
            this.isShow = false;
            this.renderer.removeClass(dropdownMenu, 'show');
        }
        this.isShow = !this.isShow;
    }

}

【讨论】：