可单击面板标题与标题按钮重叠

Question

我有一个面板组件，其中有一个标题和按钮的标题，位于右手角。

目前，向下箭头(雪佛龙)切换扩大/最小化面板内容。

当我试图实现标题可点击以控制面板内容的扩展/最小化时，这也会影响"+“符号按钮可单击事件也会导致面板展开/最小化，这是不可取的。

(单击)=“toggleShowHide()”不应影响"+“按钮

如何使"+“符号不受整个标头可单击事件的影响？请记住，其他按钮将来也可能加入"+“符号。

​

​

dashboard.html

<div style="width: 600px">
  <custom-panel heading="TABLE" enableShowHide="true">
    <span class="panel-tools" >
      <div class="input-group">
        <span  title="New content" (click)="addContent()">
          <i class="tools-plus fas fa-plus" aria-hidden="true"></i>
        </span>
      </div>
    </span>
    //content
  </custom-panel>
</div>

panel.html

<div class="panel panel-custom">
  <div class="panel-heading" *ngIf="heading"  (click)="toggleShowHide()">
    {{heading}}

    <span *ngIf="enableShowHide" class="float-right panel-chevron" (click)="toggleShowHide()" style="cursor: pointer;">
      <i [hidden]="!showPanel" title="Hide" class="tools-plus fas fa-chevron-down" aria-hidden="true"></i>
      <i [hidden]="showPanel" title="Show" class="tools-plus fas fa-chevron-right" aria-hidden="true"></i>
    </span>

    <span class="float-right">
      <ng-content select=".panel-tools"></ng-content>
    </span>
  </div>

  <div class="panel-body" [ngClass]="{'panel-scrolling': panelScrolling }" [hidden]="shouldHidePanel()">
    <div class="mb-3">
    </div>

    <ng-content></ng-content>
  </div>
</div>

panel.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'panel',
  templateUrl: './panel.component.html',
  styleUrls: ['./panel.component.scss']
})
export class PanelComponent {
  @Input() heading: string;
  @Input() size: string;
  @Input() panelScrolling = false;
  @Input() enableShowHide = false;
  @Input() hideFirst = false;
  showPanel = true;

  toggleShowHide(): void {
    this.showPanel = !this.showPanel;
  }

  shouldHidePanel(): boolean {
    if (this.enableShowHide) {
      if (this.hideFirst) {
        this.showPanel = false;
        this.hideFirst = false;
      }

      return !this.showPanel;
    }

    return false;
  }
}

panel.scss

.panel-body {
  padding: 12px;
}

.panel-custom {
  margin: 10px 15px 10px 0;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: white;

  .panel-heading {
    color: black;
    font-size: 16px;
    border-bottom: 1px solid black;
    padding: 8px 12px;
    @media (max-width: 1500px) {
      font-size: 14px;
    }
  }

Answer 1

我建议您了解"事件冒泡"，因此您在父元素上添加了事件侦听器，它会自动为所有子元素设置事件侦听器(除了具有自己的事件处理程序并停止父事件传播的元素(例如链接))。

因此，您可以只在事件处理程序方法中使用作为参数的event对象中的“event”方法。

写评论，如果你需要什么，我会尽力帮助你。

Answer 2

阻止事件从源头继续传播是个好主意。

<div class="panel-heading" *ngIf="heading" (click)="toggleShowHide($event)">
<span title="New content" (click)="addContent($event)">

  toggleShowHide(event : any): void {
    event.stopPropagation();
    this.showPanel = !this.showPanel;
  }

  addContent(event : any): void {
    event.stopPropagation();
  }