Angular中带有锚标签的无序列表未打开下拉菜单答案

【问题标题】：unordered list with anchor tags in Angular not opening dropdown menuAngular中带有锚标签的无序列表未打开下拉菜单
【发布时间】：2022-06-10 22:03:47
【问题描述】：

我的 Angular 下拉菜单有问题。它想要导航到链接而不是打开下拉菜单。只是输入“#”不起作用，所以我尝试通过获取当前 URL 并在末尾附加“#”来模拟它，但这也不起作用。（我对角度知之甚少）所以我完全删除了href，现在它可以在没有导航的情况下点击，但它不会打开下拉菜单。我不知道该怎么办...

我已经尝试了几个在这里和整个互联网上找到的选项，但我似乎无法得到任何工作。

这是我的 ts 文件

export class HeaderComponent implements OnInit {
  constructor(private navService: NavigationService, private location: Location) { }



  ngOnInit(): void {
    this.currentUrl = this.location.path() + "#"
    this.navService.getLogoLink()
      .subscribe(link => {
        this.logoHref = link
      })
  }

  @Input() user?: CurrentUser
  @Output() onLogOut = new EventEmitter()
  @Output() onGoToProfile = new EventEmitter()
  logoHref = ""
  currentUrl = ""

  goToProfile() {
    this.onGoToProfile.emit("onGoToProfile")
  }

  logOut() {
    this.onLogOut.emit("onLogOut")
  }

}

这是我的 HTML

<a href="{{currentUrl}}" data-dropdown="drop-not-bar" class="notif-drop-down"><span class="hide">Account Options Menu</span><span class="arrow"></span></a>
            <ul id="drop-not-bar" class="notif-drop-down-menu" data-dropdown-content>
              <li><a id="profile-link" (click)="goToProfile()">Account</a></li>
              <li><a id="logout-link" (click)="logOut()">Log Out</a></li>
            </ul>

感谢您的帮助！

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

它想要导航到链接而不是打开下拉菜单。

那是因为你使用div的锚标签应该可以解决这个问题。

【讨论】：