将 isExpanded() 与 ng-bootstrap 手风琴一起使用
Using isExpanded() with ng-bootstrap accordion
我正在 Angular 10 和 ng-bootstrap 制作手风琴。面板 header 上的 header 需要根据面板是折叠还是展开来显示“+”或“-”图标。我无法确定 isExpanded 方法的正确用法。
https://ng-bootstrap.github.io/#/components/accordion/api
<ngb-accordion [closeOthers]="true">
<ngb-panel *ngFor="let item of items | keyvalue ; index as i; first as isFirst" id="ngb-panel-{{item.key}}" title="ngb-panel-{{item.key}}" type="dark">
<ng-template ngbPanelHeader let-opened="{{isFirst ? 'opened' : ''}}">
<div ngbPanelToggle class="d-flex align-items-center justify-content-between bg-dark text-white">
<h5 class="m-0" ngbPanelToggle>
<button ngbPanelToggle class="text-white btn btn-link p-0">
<i class="fas fa-plus white plus-icon" *ngIf="isExpanded('ngb-panel-{{item.key}}')"></i>
<i class="fas fa-minus white minus-icon" *ngIf="!isExpanded('ngb-panel-{{item.key}}')"></i>
<!-- Alternatively? -->
<i class="fas fa-plus white plus-icon {{ isExpanded ? 'd-none' : 'd-inline'}}" ></i>
<i class="fas fa-minus white minus-icon {{ isExpanded ? 'd-inline' : 'd-none'}}"></i>-->
{{item.key}}
</button>
</h5>
</div>
</ng-template>
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</ng-template>
</ngb-panel>
</ngb-accordion>
这里解释了示例代码:
检查这个 StackBlitz:https://stackblitz.com/edit/angular-b5n7n1?file=src%2Fapp%2Fapp.component.ts
HTML 文件:
<div class="container">
<ngb-accordion #acc="ngbAccordion" id="accordion" (panelChange)="changeTitle($event, acc)">
<ngb-panel title="{{ title }}">
<ng-template ngbPanelContent>
Content
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
TS 文件:
export class AppComponent {
name = 'Angular';
title: string = "TITLE WHEN NOT EXPANDED";
changeTitle($event: NgbPanelChangeEvent, acc) {
if (!acc.isExpanded($event.panelId)) {
this.title = "TITLE WHEN EXPANDED";
} else {
this.title = "TITLE WHEN NOT EXPANDED";
}
}
}
我相信您正在寻找这样的东西:
<ngb-accordion #acc="ngbAccordion">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<i class="icon" [ngClass]="acc.isExpanded('panel1')? 'icon-expand:'icon-collapse'"><span>Title</span>
</ng-template>
<ng-template>
Text Here
<ng-template>
</ngb-panel></ngb-accordion>
我正在 Angular 10 和 ng-bootstrap 制作手风琴。面板 header 上的 header 需要根据面板是折叠还是展开来显示“+”或“-”图标。我无法确定 isExpanded 方法的正确用法。
https://ng-bootstrap.github.io/#/components/accordion/api
<ngb-accordion [closeOthers]="true">
<ngb-panel *ngFor="let item of items | keyvalue ; index as i; first as isFirst" id="ngb-panel-{{item.key}}" title="ngb-panel-{{item.key}}" type="dark">
<ng-template ngbPanelHeader let-opened="{{isFirst ? 'opened' : ''}}">
<div ngbPanelToggle class="d-flex align-items-center justify-content-between bg-dark text-white">
<h5 class="m-0" ngbPanelToggle>
<button ngbPanelToggle class="text-white btn btn-link p-0">
<i class="fas fa-plus white plus-icon" *ngIf="isExpanded('ngb-panel-{{item.key}}')"></i>
<i class="fas fa-minus white minus-icon" *ngIf="!isExpanded('ngb-panel-{{item.key}}')"></i>
<!-- Alternatively? -->
<i class="fas fa-plus white plus-icon {{ isExpanded ? 'd-none' : 'd-inline'}}" ></i>
<i class="fas fa-minus white minus-icon {{ isExpanded ? 'd-inline' : 'd-none'}}"></i>-->
{{item.key}}
</button>
</h5>
</div>
</ng-template>
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</ng-template>
</ngb-panel>
</ngb-accordion>
这里解释了示例代码:
检查这个 StackBlitz:https://stackblitz.com/edit/angular-b5n7n1?file=src%2Fapp%2Fapp.component.ts
HTML 文件:
<div class="container">
<ngb-accordion #acc="ngbAccordion" id="accordion" (panelChange)="changeTitle($event, acc)">
<ngb-panel title="{{ title }}">
<ng-template ngbPanelContent>
Content
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
TS 文件:
export class AppComponent {
name = 'Angular';
title: string = "TITLE WHEN NOT EXPANDED";
changeTitle($event: NgbPanelChangeEvent, acc) {
if (!acc.isExpanded($event.panelId)) {
this.title = "TITLE WHEN EXPANDED";
} else {
this.title = "TITLE WHEN NOT EXPANDED";
}
}
}
我相信您正在寻找这样的东西:
<ngb-accordion #acc="ngbAccordion">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<i class="icon" [ngClass]="acc.isExpanded('panel1')? 'icon-expand:'icon-collapse'"><span>Title</span>
</ng-template>
<ng-template>
Text Here
<ng-template>
</ngb-panel></ngb-accordion>