Question

.btn在btn-group类打开下拉列表后无法在Bootstrap 4.3中工作。

我想使用指令来加载下拉列表而不使用引导程序的javascript。

这是指令：

    @HostBinding('class.open') isOpen = false;
    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }

这是html代码：

 <div class="btn-group" >            
            <button 
            type= "button" 
            class="btn btn-primary dropdown-toggle" >
            Manage Recipe <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
                <li><a href="#">Add to shopping-list</a></li>
                <li><a href="#">edit recipe</a></li>
                <li><a href="#">delete recipe</a></li>
            </ul>
        </div>

Answer 1

您的按钮控件中缺少

data-toggle =“ dropdown”。添加后，它应该可以工作。

为问题中的按钮替换下面的代码行。

<button type= "button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Manage Recipe <span class="caret"></span>

Answer 2

我通过添加查询选择器并访问子级并通过渲染器设置类名解决了这个问题。在引导程序 4 中，open 类被 show 替换。因此，请改用 show。在 ul

上附加课程

如下图：

Dropdown.directive.ts

import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from "@angular/core";

@Directive({
  selector: "[appDropdown]"
})
export class DropdownDirective {

  @Input ("appDropdown") index : number;

  constructor(private theElementRef: ElementRef, private theRenderer: Renderer2) { }

  @HostListener("click") toggleDrawer() {
    let elements = this.theElementRef.nativeElement.querySelectorAll('.show');

    if (elements.length > 0) {
      this.theRenderer.removeClass(this.theElementRef.nativeElement.children[this.index], "show");
    } else {
      this.theRenderer.addClass(this.theElementRef.nativeElement.children[this.index], "show");
    }
  }

}

template.html

<div [appDropdown]="1" class="btn-group">
<button style="width: 100%" class="btn btn-primary dropdown-toggle" type="button">Manage Recipe <span
class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Add To Shopping List</a></li>
<li><a class="dropdown-item" href="#">Edit Recipe</a></li>
<li><a class="dropdown-item" href="#">Remove Recipe</a></li>
</ul>
</div>

Answer 3

您不需要所有其他的HostBinding语法，也不应仅在要引起效果的特定元素上听任何地方的点击。

TS文件：

isOpen = false;

HTML：

<div class="btn-group" [ngClass]="{'open' : isOpen}" (click)="isOpen = !isOpen">
  <button type="button" class="btn btn-primary dropdown-toggle">
            Manage Recipe <span class="caret"></span>
        </button>
  <ul class="dropdown-menu">
    <li><a href="#">Add to shopping-list</a></li>
    <li><a href="#">edit recipe</a></li>
    <li><a href="#">delete recipe</a></li>
  </ul>
</div>

Answer 4

我通过用'show'代替打开来解决问题。

<ul class="dropdown-menu show">

Answer 5

在指令中使用此方法。

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

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

export class DropdownDirective {

constructor(private elRef: ElementRef, private renderer: Renderer2) {}
@HostBinding('class.open') isOpen = false;
@HostListener('click') toggleOpen(): void {
this.isOpen = !this.isOpen;
let part = this.elRef.nativeElement.querySelector('.dropdown-menu');
 if (this.isOpen) {
   this.renderer.addClass(part, 'show');
  }else {
    this.renderer.removeClass(part, 'show');
  }
 }
}

以上代码片段适用于 bootstrap 4

 <div class="btn-group" appDropdown>
  <button
    type="button"
    class="btn btn-primary dropdown-toggle"
    data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false"
    >
    Manage Recipe
  </button>
  <ul  class="dropdown-menu">
    <li class="dropdown-item"><a href="#">To Shopping List</a></li>
    <li class="dropdown-item"><a href="#">Edit Recipe</a></li>
    <li class="dropdown-item"><a href="#">Delete Recipe</a></li>
  </ul>
</div>

Answer 6

在 <Component>.ts 文件中，添加一个属性：

isOpen = false;

然后在相应的 HTML 文件中添加以下内容：

<div class="btn-group" >
    <button
      type="button"
      class="btn btn-primary dropdown-toggle" (click)="isOpen = !isOpen">
      Manage Recipe <span class="caret"></span>
    </button>
    
    <ul class="dropdown-menu" [ngClass]="{'show' : isOpen}" >
      <li><a href="#">Add to shopping-list</a></li>
      <li><a href="#">edit recipe</a></li>
      <li><a href="#">delete recipe</a></li>
    </ul>
</div>

无法通过btn-group open打开下拉按钮组

6 个答案: