Angular 17使用ngx-slick-carousel时出现_SlickCarouselComponent注入错误

问题原因 #

ngxSlickItem指令需要从**直接父级的_SlickCarouselComponent**获取依赖注入，但你通过ng-content投影的元素属于父组件的注入器上下文，无法访问子组件中ngx-slick-carousel实例所在的注入器，因此触发找不到提供者的错误。

解决方案 #

方案1：在子组件内部为投影内容添加ngxSlickItem #

修改子组件代码，通过@ContentChildren获取父组件传递的模板，在子组件内部为每个项包裹带有ngxSlickItem的容器：

子组件模板（app-carousel-section）

<ngx-slick-carousel #slickModal="slick-carousel" [config]="carouselConfig">
  <div ngxSlickItem *ngFor="let template of itemTemplates">
    <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>
</ngx-slick-carousel>

子组件TS

import { Component, ContentChildren, QueryList, TemplateRef } from '@angular/core';
import { SlickCarouselModule } from 'ngx-slick-carousel';

@Component({
  selector: 'app-carousel-section',
  templateUrl: './carousel-section.component.html',
  standalone: true,
  imports: [SlickCarouselModule]
})
export class CarouselSectionComponent {
  carouselConfig = { /* 你的滑块配置，比如 slidesToShow: 2, slidesToScroll: 1 */ };
  
  @ContentChildren(TemplateRef) itemTemplates!: QueryList<TemplateRef<any>>;
}

父组件模板

<app-carousel-section>
  <ng-template>
    <app-product-card [countActiveStars]="3"></app-product-card>
  </ng-template>
  <ng-template>
    <app-product-card [countActiveStars]="3"></app-product-card>
  </ng-template>
</app-carousel-section>

方案2：避免内容投影，直接传递数据渲染 #

如果不需要动态投影任意内容，可让子组件接收数据数组，内部直接渲染滑块项：

子组件TS

import { Component, Input } from '@angular/core';
import { SlickCarouselModule } from 'ngx-slick-carousel';

@Component({
  selector: 'app-carousel-section',
  templateUrl: './carousel-section.component.html',
  standalone: true,
  imports: [SlickCarouselModule]
})
export class CarouselSectionComponent {
  carouselConfig = { /* 你的滑块配置 */ };
  @Input() products!: Array<{ stars: number }>;
}

子组件模板

<ngx-slick-carousel #slickModal="slick-carousel" [config]="carouselConfig">
  <div ngxSlickItem *ngFor="let product of products">
    <app-product-card [countActiveStars]="product.stars"></app-product-card>
  </div>
</ngx-slick-carousel>

父组件模板

<app-carousel-section [products]="[{stars:3}, {stars:3}]"></app-carousel-section>

额外检查 #

确保已正确导入SlickCarouselModule：

• 独立组件：在组件的imports数组中添加SlickCarouselModule
• NgModule：在模块的imports数组中添加SlickCarouselModule

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