时间戳

首页 > 解决方案 > 当我在引导程序中使用导航栏下拉菜单时，我在 Angular 中不能有多个点击事件

angular - 当我在引导程序中使用导航栏下拉菜单时，我在 Angular 中不能有多个点击事件

问题描述

我有一个标题组件。在标题组件中，我有一个名为 app-notification-message 的子组件。有淋浴的引导导航栏下拉菜单，因此单击它将使用列表元素切换下拉菜单。问题是当我单击带有类包装器的 div 时 - markAllMessagesAsSeenHandler 被执行但只执行一次。之后没有点击事件。为什么会出现这种情况，我该如何解决？

//header compo
<nav class="navbar navbar-expand-lg navbar-light bg-light dropup" *ngIf="userService.user">
  <a class="navbar-brand" href="#"></a>
  <div class="header-logo header-logo--img">
    <img src="assets/img/ht-logo.svg" srcset="assets/img/ht-logo.svg" alt="Hedge Trade Sports Logo">
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-placement="top"
    data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav-custom">
      <ng-container *ngIf="isTheUserAuthenticated; else elseif1">
        <li class="nav-item"><a class="nav-link">Welcome {{ userService.user.alias }} ({{ userService.user.balance | currency }})</a></li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/profile" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Profile</a>
        </li>
        <li class="nav-item" (click)="logoutHandler()">
          <a class="nav-link main-nav__list-logout-link" [routerLinkActiveOptions]="{exact:true}"
            routerLinkActive="active">Logout</a>
        </li>
        
        
        <app-notification-message></app-notification-message>

      </ng-container>
    </ul>
  </div>
</nav>

//app-notification-message component
<div class="wrapper" (click)="markAllMessagesAsSeenHandler()">
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    <svg role="img" class="dropdown-image">
      <image width="24" height="24" xlink:href="assets/img/notification.svg" />
    </svg>
    <div class="notification-icon">
      <span class="" [ngClass]= "(userService.user.unseen_notifications_no != 0) ? 'notification-icon__number-positive' : 'notification-icon__number-negative'">{{ userService.user.unseen_notifications_no }}</span>
    </div>
    <span class="up-icon">&#8963;</span>
  </a>
</li>
</div>

标签： angulartwitter-bootstrap

解决方案

我使用导航链接下拉切换类删除了锚标记上的 (click)="markAllMessagesAsSeenHandler()"。然后它起作用了。

推荐阅读