2

我想在手风琴组件的标题中添加操作。唯一的问题是，如果您单击该操作，手风琴将在折叠和展开之间进行更改。

例子：

<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事件，但这会在更改后发出。

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

提前致谢

4

3 回答 3

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;
}
于 2020-05-02T19:22:28.807 回答
0

抱歉，如果这有点晚了 - 我遇到了同样的问题，简而言之，没有 API 或直接方法可以阻止手风琴项目在您单击标题组件中的任何位置时触发展开/折叠。原因是因为 nebular 将单击事件附加到将触发展开/折叠事件的手风琴标题的所有呈现的 html 子项。如果您检查元素并查看附加的事件侦听器，您实际上可以看到附加的事件。

一种骇人听闻的方法是尝试删除附加的事件。

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

组件.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>

组件.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();
  }

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

于 2020-11-06T23:47:41.627 回答
0

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

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

于 2020-11-14T19:56:59.067 回答