我正在将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中的替代方法是什么?
答案 0 :(得分:4)
为了在引导程序中工作,您需要在两个位置添加show类,可以通过使用角度模板ref获取对isOpen变量的引用来实现
如果要获取指令的引用,则需要先导出指令
@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
答案 1 :(得分:0)
确保已将指令导入到app.module.ts文件