我正在尝试创建一个下拉指令，可以使用该指令向任何DOM元素添加下拉菜单。我写了这个指令：
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
constructor() { }
isOpen: boolean = false;
@HostListener('click') toggle() {
if (this.isOpen === true) {
this.hide();
} else {
this.show();
}
this.isOpen = !this.isOpen;
}
private show() {
// What to do here?
}
private hide() {
// What to do here?
}
}
这个指令基本上监听它所应用的DOM元素上的点击。当它注册点击时，我想切换与我应用该指令的元素位于同一容器中的下拉元素(通过使用display属性)。我的html代码的简化形式如下：
<a appDropdown>Dropdown</a>
<ul class="dropdown"> <--- How can I apply a display style property to this element when clicking the anchor (to hide/show the dropdown)?
<li><a>Option A</a></li>
<li><a>Option B</a></li>
</ul>
我仔细阅读了Angular文档，但没有对此进行解释。
我希望你能理解我的问题。谢谢
据我所知，这不是指令的正确用法。我正在努力实现一个非常相似的输出。
我正在尝试实现类似的东西，通过阅读文档(以及上面的@evandro-mendes的答案)，结构指令被设计为改变DOM的行为，而不需要自己定义任何模板(请参阅angular文档)。
看看https://github.com/valor-software/ngx-bootstrap/blob/development/src/dropdown/bs-dropdown.directive.ts(或文档/演示https://valor-software.com/ngx-bootstrap/#/dropdowns)他们使用指令来显示/隐藏/操作组件，但不声明其自身的内容。
我的解决方案是使用ngx引导程序创建一个组件，如下所示：
下拉列表.组件.ts:
@Component({
selector: 'dropdown',
template: './dropdown.component.html'
})
export class AutosuggestComponent {
@Input() viewModel: string[];
@Input() isOpen: boolean = false;
}
下拉列表.组件.html
<div dropdown [isOpen]="isOpen" [autoClose]="true" placement="top">
<ng-content #input>
</ng-content>
<div *dropdownMenu class="dropdown-menu" role="menu">
<div *ngFor="let item of viewModel" class="dropdown-item">
{{item}}
</div>
</div>
使用
<dropdown [viewModel]="sourceData" [isOpen]="isDropdownOpen">
<input type="text">
</dropdown>
通过这种方式，我不定义任何自定义行为，并且仍然可以使用下拉菜单在应用程序中进行任何输入。
希望这有帮助：)
我认为应该包含一些Angular5属性。
请点击此链接：
使用Bootstrap 4和Firebase 构建Angular 5项目