如何从ng-bootstrap折叠面板父组件内的子组件调用toggle方法？

方法1：通过事件触发解耦控制（推荐，低耦合） #

父组件实现 #

1. 类文件中通过@ViewChild获取Accordion实例，定义控制方法：

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('accordion') accordion!: NgbAccordion;

  toggleAccordionPanel(panelId: string) {
    this.accordion.toggle(panelId);
  }
}

2. 模板中给子组件绑定事件监听：

<div ngbAccordion #accordion="ngbAccordion">
  <div ngbAccordionItem="first">
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>First Panel</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          Some collapsible content to render
        </ng-template>
      </div>
    </div>
  </div>
  <!-- 另外两个面板同理，设置id为second、third -->
</div>
<app-child-component (togglePanel)="toggleAccordionPanel($event)"></app-child-component>

子组件实现 #

1. 类文件定义输出事件，触发时传递面板ID：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Output() togglePanel = new EventEmitter<string>();

  toggleFirst() {
    this.togglePanel.emit('first');
  }

  toggleSecond() {
    this.togglePanel.emit('second');
  }

  toggleThird() {
    this.togglePanel.emit('third');
  }
}

2. 模板绑定按钮点击事件：

<button (click)="toggleFirst()">Toggle First Panel</button>
<button (click)="toggleSecond()">Toggle Second Panel</button>
<button (click)="toggleThird()">Toggle Third Panel</button>

方法2：直接传递Accordion实例（简单直接） #

父组件模板修改 #

直接将父组件的Accordion引用通过输入属性传给子组件：

<div ngbAccordion #accordion="ngbAccordion">
  <!-- 面板内容同方法1 -->
</div>
<app-child-component [accordion]="accordion"></app-child-component>

子组件实现 #

1. 类文件通过输入属性接收Accordion实例：

import { Component, Input } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() accordion!: NgbAccordion;
}

2. 模板直接调用实例的toggle方法：

<button (click)="accordion.toggle('first')">Toggle First Panel</button>
<button (click)="accordion.toggle('second')">Toggle Second Panel</button>
<button (click)="accordion.toggle('third')">Toggle Third Panel</button>

关键注意事项 #

• 确保父、子组件所属的模块都已导入NgbAccordionModule
• 不要在子组件中创建空的ngbAccordion元素，这会生成独立的新实例，无法控制父组件的面板
• 方法1适合需要解耦的场景，方法2适合简单的父子组件联动场景

内容的提问来源于stack exchange，提问作者thetada