Angular中ng-template内无法触发click事件，Fieldset折叠异常求助

问题出在PrimeNG Splitter组件内部的ng-template中，点击事件可能被Splitter的面板元素捕获或冒泡干扰，导致无法触发折叠逻辑。可以通过以下步骤修复：

• 阻止事件冒泡：在内部fieldset的legend点击事件中添加$event.stopPropagation()，确保点击事件直接触发组件的toggle方法，而不会被上层的Splitter组件拦截：

  <ng-template pTemplate>
    <fieldset class="fieldset">
      <legend (click)="toggle('inner'); $event.stopPropagation()">Inner Fieldset</legend>
      <div *ngIf="showInner">
        <!-- 内部内容 -->
      </div>
    </fieldset>
  </ng-template>
  

• 确保样式可点击：给legend元素添加cursor: pointer样式，明确提示可点击，同时避免点击区域被其他元素覆盖：

  .fieldset legend {
    cursor: pointer;
    user-select: none;
  }
  

• 验证变量绑定：确认组件类中showInner变量初始值正确（比如设为true），且toggle方法逻辑无误，确保点击时能正确切换变量状态：

  showInner = true;
  
  toggle(fieldset: string) {
    if (fieldset === 'inner') {
      this.showInner = !this.showInner;
    }
    // 其他逻辑...
  }
  

这样修改后，内部fieldset的折叠/展开功能就能正常工作了。

内容的提问来源于stack exchange，提问作者Alfi Hamdani