Question

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

我是初学者。我正在通过udemy的教程使网站成角度。我要创建一个下拉按钮。两种代码均正确。但是当我单击下拉按钮时，下拉菜单没有打开

`@Directive({
selector: '[appdropdown]'
})
export class DropdownDirective  {
@HostBinding('class.Open') isOpen = false; 
@HostListener('click') toggleOpen () {
    this.isOpen = !this.isOpen;
}
}`

HTML代码和ts代码正确无误，但无法运行

    <ul class="nav navbar-nav justify-content-end"> 
    <li class=" nav-item  dropdown" appdropdown>
    <a href="#" class=" nav-link dropdown-toggle" role="button">Manage <span 
    class="caret"></span> </a>
    <ul class="dropdown-menu">
    <li>
    <a href="#"> Save Data</a>
    </li>
    <li>
    <a href="#">Fetch Data</a>
    </li>
    </ul>  
    </li>
    </ul>

Answer 1

听起来像无效的CSS。没有为您提供任何信息，但我已将您的示例复制粘贴到此Stackblitz

中

我添加了以下样式

li:not(.Open) .dropdown-menu{
  display: none;
}

显然，它不会产生“下拉”效果，但可以证明总体技术是有效的

Answer 2

您需要在DropdownDirective的声明中导入app.module。

使用角度的下拉菜单

2 个答案: