Question

我有一个div，它在Angular应用程序中显示用户通知。

div周围有一个锚标记，单击该锚标记会调用一个将通知标记为已读的函数。

div单独包含一个按钮，该按钮使用户可以转到通知的来源。

我的问题是-当用户单击按钮时，如何停止将通知也标记为已读的锚点？

<a (click)="toggleNotificationRead()" >
    <div>
      <button (click)="goTo()" >
          Go To
      </button>  
    </div>
</a>

在我的组件中：

goTo() {
  window.location.href = `${this.url}`
};

Answer 1

您需要设置按钮的类型：

<a (click)="toggleNotificationRead()" >
    <div>
      <button type="button" (click)="goTo()" >
          Go To
      </button>  
    </div>
</a>

另外，您可能需要捕获事件并停止传播，但是您不必这样做：

<a (click)="toggleNotificationRead()" >
    <div>
      <button type="button" (click)="goTo($event)" >
          Go To
      </button>  
    </div>
</a>

goTo(event: Event) {
  event.stopPropagation();
  window.location.href = `${this.url}`
};

请注意，此HTML无效。内联元素中有块级元素。我会认真考虑重组此代码。

Angular-当有人单击嵌套按钮时，如何阻止锚定点击发生

1 个答案: