angular - 将属性传递给 ng-content 中的组件(属性在标记所在的组件中不可用)

Question

我正在尝试开发一个轮播。

期望的最终结果应该是开发人员只需将整个标记写在一个地方(比方说在 app.component.html 中)，只有一个 options 属性然后，轮播将接管。

问题是，从 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>

carousel.component.html:

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

carousel-item.component.html:

<ng-content></ng-content>

Answer 1

我认为唯一的解决方案是使用 @ContentChildren()

在我的 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);
    }
  }
}

然后，在 carousel-item.component.ts 中:

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 绑定(bind)动画触发器。我假设 @HostBingind() 被设计为仅适用于标准 html 属性(样式、类等)，但似乎我实际上可以绑定(bind)任何东西(字面意思是任何东西)。

有人有更好的解决方案吗？在我接受我自己的回答之前...