如何封装ngb-carousel？自定义组件幻灯片不显示问题解决

直接用<ng-content>投影带ngbSlide指令的<ng-template>之所以无效，是因为ngb-carousel内部需要直接获取原始的TemplateRef实例，而<ng-content>传递的是已实例化的内容，无法被ngb-carousel的内部查询逻辑识别。

正确的封装方式是通过@ContentChildren收集幻灯片模板，再动态渲染到内部的ngb-carousel中，具体步骤如下：

1. 实现自定义组件MyCarouselComponent #

组件类代码 #

import { Component, ContentChildren, QueryList, TemplateRef } from '@angular/core';
import { NgbSlide } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-carousel',
  template: `
    <ngb-carousel>
      <!-- 遍历收集到的幻灯片模板，逐个渲染 -->
      <ng-container *ngFor="let slide of slides" [ngTemplateOutlet]="slide"></ng-container>
    </ngb-carousel>
  `
})
export class MyCarouselComponent {
  // 收集所有带有ngbSlide指令的TemplateRef
  @ContentChildren(NgbSlide, { read: TemplateRef }) slides!: QueryList<TemplateRef<any>>;
}

关键说明 #

• @ContentChildren(NgbSlide, { read: TemplateRef })：从组件的内容投影中，查询所有标记了ngbSlide指令的模板引用，确保获取到原始的TemplateRef实例。
• ngTemplateOutlet：将收集到的模板动态渲染到内部的ngb-carousel中，让ngb-carousel能正确识别每个幻灯片。

2. 使用自定义组件 #

使用方式和原生ngb-carousel完全一致，直接嵌套带ngbSlide的<ng-template>即可：

<my-carousel>
  <ng-template ngbSlide>
    <img src="assets/slide1.jpg" alt="第一页幻灯片">
    <div class="carousel-caption">
      <h3>第一页标题</h3>
      <p>示例描述文本</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="assets/slide2.jpg" alt="第二页幻灯片">
    <div class="carousel-caption">
      <h3>第二页标题</h3>
      <p>另一段示例描述文本</p>
    </div>
  </ng-template>
</my-carousel>

3. 必要的模块导入 #

确保在你的Angular模块中导入相关模块：

import { NgModule } from '@angular/core';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { MyCarouselComponent } from './my-carousel.component';

@NgModule({
  declarations: [MyCarouselComponent],
  imports: [NgbCarouselModule],
  exports: [MyCarouselComponent]
})
export class MyCarouselModule { }

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