Question

当页面加载时，我需要显示我的手风琴第一个选项卡打开。目前一切正常。请检查我的代码。

    <div class="panel-heading" role="tab" [id]="'heading'+data.id">
    <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" [href]="'#collapse'+data.id" aria-expanded="true" [attr.aria-controls]="'collapse'+data.id">
            {{data.header}}
        </a>
    </h4>
</div>
<div [id]="'collapse'+data.id" class="panel-collapse collapse" role="tabpanel" [attr.aria-labelledby]="'heading'+data.id">
    <div class="panel-body">
        {{data.content}}
    </div>
</div>

请查看此演示 Demo。当页面加载时，我如何打开/显示第一个手风琴。谢谢

Answer 1

要默认打开第一个手风琴，您可以执行以下步骤：

第一个解决方案

步骤 1：检索列表索引并通过属性绑定（输入）传递给子组件 HelloComponent。

<块引用>

app.component.html

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <app-example *ngFor="let data of accordianData; index as i;" 
    [data]="data" 
    [index]="i" 
    class="panel panel-default">
  </app-example>
</div>

第 2 步：为索引添加 Input() 并在 OnInit 中为 isAccordionOpen 实现逻辑（默认情况下仅打开第一个索引）。

<块引用>

hello.component.ts

@Component({
  selector: 'app-example',
  templateUrl: `./hello.component.html`,
  styleUrls: [`./hello.component.css`]
})
export class HelloComponent implements OnInit {
  @Input('data') data: any;
  @Input('index') index: number;

  isAccordionOpen: boolean;

  ngOnInit() {
    this.isAccordionOpen = this.index === 0;
  }
}

第 3 步：添加 *ngClass 以添加基于 isAccordionOpen 的“show”类。

<块引用>

hello.component.html

<div class="panel-heading" role="tab" [id]="'heading'+data.id">
  <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" [href]="'#collapse'+data.id" aria-expanded="true"
      [attr.aria-controls]="'collapse'+data.id" (click)="isAccordionOpen = !isAccordionOpen">
      {{data.header}}
    </a>
  </h4>
</div>
<div [id]="'collapse'+data.id" class="panel-collapse collapse" 
  [ngClass]="{'show': isAccordionOpen}" role="tabpanel"
  [attr.aria-labelledby]="'heading'+data.id">
  <div class="panel-body">
    {{data.content}}
  </div>
</div>

First Solution: Complete source code

注意：当我重新测试第一个元素折叠时，我发现第一个元素会在第一时间重新打开。怀疑data-toggle="collapse"和ng-show有冲突。

第二种解决方案：应用Angular Bootstrap Collapse

提出这个解决方案是为了解决上面列出的第一个解决方案的错误。

第一步：安装@ng-bootstrap/ng-bootstrap

npm install @ng-bootstrap/ng-bootstrap

第 2 步：在 app.module.ts 中添加 NgbModule 导入

<块引用>

app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [..., NgbModule]
  ...
})

第 3 步：检索列表索引并通过属性绑定（输入）传递给子组件 HelloComponent。

<块引用>

app.component.html

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <app-example *ngFor="let data of accordianData; index as i;" 
    [data]="data" 
    [index]="i" 
    class="panel panel-default">
  </app-example>
</div>

第 4 步：为索引添加 Input() 并在 OnInit 中为 isCollapsed 实现逻辑（默认情况下仅打开第一个索引）。

<块引用>

hello.component.ts

@Component({
  selector: 'app-example',
  templateUrl: `./hello.component.html`,
  styleUrls: [`./hello.component.css`]
})
export class HelloComponent implements OnInit {
  @Input('data') data: any;
  @Input('index') index: number;

  isCollapsed: boolean;

  ngOnInit() {
    this.isCollapsed = this.index !== 0;
  }
}

步骤 5：应用 Angular Bootstrap 折叠组件

<块引用>

hello.component.html

<div class="panel-heading" role="tab" [id]="'heading'+data.id">
  <h4 class="panel-title">
    <a role="button" (click)="collapse.toggle()" 
      [attr.aria-controls]="'collapse'+data.id"
      [attr.aria-expanded]="!isCollapsed">
      {{data.header}}
    </a>
  </h4>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" role="tabpanel" 
  [attr.aria-labelledby]="'heading'+data.id">
  <div class="panel-body">
    {{data.content}}
  </div>
</div>

Second Solution: Complete source code

参考文献：

Accordion example to open by default

angular bootstrap 4 手风琴动态加载第一个选项卡显示页面加载

1 个答案:

第一个解决方案

第二种解决方案：应用Angular Bootstrap Collapse