Angular 如何包装NGB carousel

发布于01月30日

我有一个ngb-carousel的实例，它当前的用法如下:

<ngb-carousel>
    <ng-template ngbSlide>Hello</ng-template>
    <ng-template ngbSlide>World</ng-template>
</ngb-carousel>

我想将它包装到我的定制 carousel 组件中，以提供一些额外的功能，以便这样使用它:

<!-- my-carousel.component.html -->
<div class="my-carousel">
    <ngb-carousel>
        <ng-content></ng-content>
    </ngb-carousel>
    <div>Some text here</div>
</my-carousel>

<!-- usage -->
<my-carousel>
    <ng-template ngbSlide>Hello</ng-template> 
    <ng-template ngbSlide>World</ng-template>
</my-carousel>

然而，这种天真的方法并不起作用，因为幻灯片没有被显示.

我试图使用<ng-content select="ng-template[ngbSlide]" ngProjectAs="ng-template[ngbSlide]">和其他组合，但都无济于事.

我遗漏了什么？哪种方式才是正确的呢？

推荐答案

我们需要创建模板引用为slide的模板.
然后我们可以拿ContentChildren分，通过内容投影获得所有幻灯片
获得幻灯片后，关键是使用属性为ngbSlide的ng-template作为NGB-Carousel，以将其识别为幻灯片
我们可以使用@for在幻灯片中循环，并使用ngTemplateOutlet在ng-template中呈现它们

下面的工作示例

父html

@if (images) {
<my-carousel>
  <ng-template #slide>
    <div class="picsum-img-wrapper">
      <img [src]="images[0]" alt="Random first slide" />
    </div>
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template #slide>
    <div class="picsum-img-wrapper">
      <img [src]="images[1]" alt="Random second slide" />
    </div>
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template #slide>
    <div class="picsum-img-wrapper">
      <img [src]="images[2]" alt="Random third slide" />
    </div>
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</my-carousel>
}

父TS

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

@Component({
  selector: 'ngbd-carousel-basic',
  standalone: true,
  imports: [NgbCarouselModule, MyCarouselComponent],
  templateUrl: './carousel-basic.html',
})
export class NgbdCarouselBasic {
  images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);
}

我的 carousel

import { CommonModule } from '@angular/common';
import {
  Component,
  ContentChildren,
  OnInit,
  QueryList,
  TemplateRef,
} from '@angular/core';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-carousel',
  template: `
  <div class="my-carousel">
    <ngb-carousel>
      @for(slide of slides; track slide; let i = $index) {
      <ng-template ngbSlide >
        <ng-template
         [ngTemplateOutlet]="slide"></ng-template>
      </ng-template>
      }
    </ngb-carousel>
    <div>Some text here</div>
  </div>
  `,
  standalone: true,
  imports: [NgbCarouselModule, CommonModule],
})
export class MyCarouselComponent implements OnInit {
  @ContentChildren('slide', { read: TemplateRef }) slides: QueryList<
    TemplateRef<any>
  >;
  constructor() {}

  ngOnInit() {}

  ngAfterContentInit() {
    console.log(this.slides);
  }
}

stackblitz个