手风琴组件 header 中的操作

Question

我想在手风琴组件的 header 中添加操作。唯一的问题是，如果您单击该操作，手风琴将显示折叠和展开之间的变化。

示例：

<nb-accordion>
  <nb-accordion-item #primaryItem expanded="true">
    <nb-accordion-item-header>
      Dashboard
      <nb-actions size="small">
        <nb-action icon="search">Search</nb-action>
        <nb-action icon="star"></nb-action>
        <nb-action icon="star" status="warning"></nb-action>
      </nb-actions>
    </nb-accordion-item-header>
    <nb-accordion-item-body>
      item content
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>

看起来像这样：

我可以在 api 中看到有一个 collapsedChange 事件，但它是在更改后发出的。

我在这里运气不好吗？有没有办法拦截和取消崩溃事件？

提前致谢

Answer 1

看来只有我一个人在找这个。所以我制作了自己的定制卡片来提供我想要的功能。你可以把它用在你自己的 angular 项目中。它是一张带有页眉和页脚部分以及用于添加操作的部分的可折叠卡片。

汽车组件：

<nb-card accent="{{accentColor}}" status="{{statusColor}}">
  <nb-card-header>
    <span class="float-left card-title">
      <ng-content select="[slot=title]"></ng-content>
    </span>
    <nb-actions size="small" class="float-right">
      <nb-action><button type="button" status="basic" nbButton size="small" (click)="toggleExpand()">
          <nb-icon icon="{{expandedIcon}}"></nb-icon>{{ expandedText }}
        </button></nb-action>
      <!-- icon="{{expandedIcon}}" -->
    </nb-actions>
    <span class="float-right" *ngIf="hasActions">
      <ng-content select="[slot=actions]"></ng-content>
    </span>
  </nb-card-header>
  <nb-card-body *ngIf="expandedState" class="content-body">
    <ng-content select="[slot=body]"></ng-content>
  </nb-card-body>
  <nb-card-footer *ngIf="expandedState && hasFooter">
    <ng-content select="[slot=footer]"></ng-content>
  </nb-card-footer>
</nb-card>

组件.ts

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

@Component({
  selector: 'app-content-card',
  templateUrl: './content-card.component.html',
  styleUrls: ['./content-card.component.scss'],
})
export class ContentCardComponent implements OnInit {
  // STATUS OPTIONS: basic, primary, info, success, warning, danger, control
  // ACCENT OPTIONS: basic, primary, info, success, warning, danger, control

  @Input() hasActions: boolean;
  @Input() hasFooter: boolean;
  @Input() accentColor: string;
  @Input() statusColor: string;

  public readonly upIcon = 'arrowhead-up-outline';
  public readonly downIcon = 'arrowhead-down-outline';
  public readonly hideText = 'hide';
  public readonly showText = 'show';

  public expandedState = true;
  public expandedText: string;
  public expandedIcon: string;

  constructor() {}

  ngOnInit() {
    this.expandedIcon = this.upIcon;
    this.expandedText = this.hideText;
  }

  public toggleExpand(): void {
    this.expandedState = !this.expandedState;
    if (this.expandedState) {
      this.expandedIcon = this.upIcon;
      this.expandedText = this.hideText;
    } else {
      this.expandedIcon = this.downIcon;
      this.expandedText = this.showText;
    }
  }
}

组件.scss

.float-right {
  float: right;
}

.float-left {
  float: left;
}

Answer 2

抱歉，如果这有点晚了 - 我运行遇到了同样的问题，简而言之，没有 API 或直接的方法来阻止手风琴项目触发 expand/collapse 每当您单击 header 组件中的任意位置时。原因是因为星云将点击事件附加到手风琴 header 的所有渲染 html children 上，这将触发 expand/collapse 事件。如果您检查元素并查看附加的事件侦听器，您实际上可以看到附加的事件。

一种 hacky 方法是尝试删除附加事件。

解决此问题的第二种 hacky 方法是我使用的方法是在单击后第二次触发手风琴的切换。最终结果是用户看不到手风琴展开（因为展开 + 折叠 = 没有 ui 更改）：

component.html

<nb-accordion>
  <nb-accordion-item #primaryItem expanded="true" *ngFor="let item in items; let i = index;">
    <nb-accordion-item-header>
      Dashboard
      <nb-actions size="small">
        <nb-action icon="search" (click)="cancelAccordionToggle(i)">Search</nb-action>
        <nb-action icon="star" (click)="cancelAccordionToggle(i)"></nb-action>
        <nb-action icon="star" status="warning" (click)="cancelAccordionToggle(i)"></nb-action>
      </nb-actions>
    </nb-accordion-item-header>
    <nb-accordion-item-body>
      item content
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>

component.ts

// use the following hack for accordian so action items do not trigger toggle
  @ViewChildren(NbAccordionItemComponent) listItems: QueryList<NbAccordionItemComponent>;
  cancelAccordionToggle(index: number) {
    const listItem: NbAccordionItemComponent = this.listItems.toArray()[index];
    listItem.toggle();
  }

如果您不想这样破解它，另一种解决方案是像您一样自己制作。

Answer 3

我在 <nb-accordion-item-header>

的 nbButton 中添加了以下内容

(click)="$event.stopPropagation()" 它对我有用。

手风琴组件 header 中的操作

actions in the header of an accordion component

ngx-admin