Angular Dropdown指令不起作用 [英] Angular Dropdown directive doesn't work

问题描述

我将Angular 6.0.5和Bootstrap 4.1.1一起使用，并且添加了一个下拉菜单指令.但是我绝对不能让它工作.我在这里看到过很多类似的问题，但Bootstrap 4却没有. 这是下拉HTML:

<div class="btn-group" appDropdown>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" style="cursor: pointer"
           (click)="OnAddToShoppingList()">To Shopping List</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

这是指令:

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

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

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

我怀疑公开"课.而且我认为这是Bootstrap 3中已弃用的类，那么Bootstrap 4中的替代方法是什么?

解决方案

要在引导程序中工作，您需要在两个位置添加show类，可以通过使用角度模板ref引用isOpen变量来实现该类./p>

如果要获取指令的引用，则需要先导出指令

@Directive({
  selector: '[appDropDown]',
exportAs:'appDropDown'
})

然后您可以使用模板引用方法来实现下拉

<div class="btn-group" appDropDown #r="appDropDown" >
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}" >
    <li><a class="dropdown-item" style="cursor: pointer"
           >To Shopping List</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

我在此处包含示例，请查看: https://stackblitz.com/edit/angular-h9rgmn

I am using Angular 6.0.5 alongside with Bootstrap 4.1.1 and I added a directive for dropdowns. But I can't make it work in no way. I have seen a lot of similar problems here but none was for Bootstrap 4. this is the dropdown html:

<div class="btn-group" appDropdown>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" style="cursor: pointer"
           (click)="OnAddToShoppingList()">To Shopping List</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

and this is the directive:

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

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

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

I suspected about the "open" class. and I think it was a depreacted class from Bootstrap 3. so what is alternative in Bootstrap 4?

解决方案

In order to work drop down in bootstrap you need to add show class in two places which you can achieve by get the reference to isOpen variable using angular template ref

If you want to get the reference to directives you need to export the directive first

@Directive({
  selector: '[appDropDown]',
exportAs:'appDropDown'
})

Then you can use the template ref method to achive dropdown

<div class="btn-group" appDropDown #r="appDropDown" >
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}" >
    <li><a class="dropdown-item" style="cursor: pointer"
           >To Shopping List</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

I have include example here check out: https://stackblitz.com/edit/angular-h9rgmn

这篇关于Angular Dropdown指令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！