Angular 将属性传递给ng内容内的组件（标记所在组件中不可用的属性）

我正在尝试开发一个旋转木马

理想的最终结果应该是，开发人员只需在一个地方（比如在

app.component.html

）编写整个标记，只需使用

选项

属性，然后轮播就会接管

问题是，从

carousel.component

我需要在

carousel item.component

上设置一些属性（属性

app.component

应该与…无关，但所有标记都在

app.component.html

中）

我怎样才能做到这一点

app.component.html:

<carousel [options]="myOptions">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<hr />

<carousel [options]="myOptions2">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<div class="carousel-stage">
    <ng-content></ng-content>
</div>

<ng-content></ng-content>

carousel item.component.html:

<carousel [options]="myOptions">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<hr />

<carousel [options]="myOptions2">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<div class="carousel-stage">
    <ng-content></ng-content>
</div>

<ng-content></ng-content>

---

我认为唯一的解决办法是使用

@ContentChildren（）

在my

carousel.component.ts

中：

import { ContentChildren, ... } from '@angular/core';

// ...

export class CarouselComponent implements AfterContentInit {
  @ContentChildren(ItemComponent) carouselItems;

  ngAfterContentInit() {
    this.carouselItems.forEach((item: ItemComponent, currentIndex) => {
      // Do stuff with each item
      // Even call item's methods:
      item.setWidth(someComputedWidth);
      item.setClass(someClass);
    }
  }
}

export class ItemComponent implements OnInit, OnDestroy {
  @HostBinding('style.width') itemWidth;
  @HostBinding('class') itemClass;
  @HostBinding('@fade') fadeAnimationState;


  setWidth(width) {
    this.itemWidth = width + 'px';
  }
  setClass(class) {
    this.itemClass = class;
  }
  setAnimationState(state) {
    this.fadeAnimationState = state;
  }
}

然后，在

carousel item.component.ts中：

import { ContentChildren, ... } from '@angular/core';

// ...

export class CarouselComponent implements AfterContentInit {
  @ContentChildren(ItemComponent) carouselItems;

  ngAfterContentInit() {
    this.carouselItems.forEach((item: ItemComponent, currentIndex) => {
      // Do stuff with each item
      // Even call item's methods:
      item.setWidth(someComputedWidth);
      item.setClass(someClass);
    }
  }
}

export class ItemComponent implements OnInit, OnDestroy {
  @HostBinding('style.width') itemWidth;
  @HostBinding('class') itemClass;
  @HostBinding('@fade') fadeAnimationState;


  setWidth(width) {
    this.itemWidth = width + 'px';
  }
  setClass(class) {
    this.itemClass = class;
  }
  setAnimationState(state) {
    this.fadeAnimationState = state;
  }
}

显然，我甚至可以用@HostBinding绑定动画触发器。我假设@HostBingind（）的设计仅适用于标准html属性（样式、类等），但似乎我实际上可以绑定任何东西（字面上的任何东西）

有谁有更好的解决办法吗？在我接受自己的答案之前…
谢谢分享。这是正确的方法，IMO。对于另一个类似的参考，您可以看看Ag网格团队如何将转换用于列配置：
@ContentChildren
在不使用
ng content
的情况下用于获取和使用子元素进行配置。