手风琴组件的标头中的操作

Question

我想在手风琴组件的标题中添加操作。唯一的问题是，如果你点击这个动作，手风琴就会在折叠和展开之间显示长度。

示例：

<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

看来只有我一个人在找这个。因此，我建立了自己的自定义卡，为我提供我想要的功能。你可以把它用在你自己的角度项目中。它是一个带有页眉和页脚部分的可折叠卡，以及一个用于添加操作的部分。

汽车部件：

<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或直接方法来阻止无论何时单击标头组件中的任何位置，手风琴项目都不会触发展开/折叠。原因是nebular将一个click事件附加到所有呈现的html子程序中，这些子程序将触发展开/折叠事件。如果检查元素并查看附加的事件侦听器，实际上可以看到附加的事件。

一种恶意的方法是尝试删除附加的事件。

第二个麻烦的方法是在点击后第二次打开手风琴的开关。最终结果是用户没有看到手风琴展开(因为展开+折叠=没有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

我将以下内容添加到我的nbButton中<nb-accordion-item-header>中

(click)="$event.stopPropagation()"和它为我工作。