Angular 6 + Bootstrap 4 添加"show"类与@HostBinding

Question

@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>

表演类不会被添加，我不明白为什么。我使用了Chromes检查工具，虽然前两个被更改了，但第三个没有。

Answer 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>

在索引中添加这些 CDN.html

<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>

Answer 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;
}

Answer 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;
}
}