Question

我正在尝试为Angular 2应用程序创建一个轮播组件。

我希望轮播是通用的，以便它支持这两种情况：

<myCarousel>
  <div>first card</div>
  <div>second card</div>
  ....
</myCarousel>

和更通用的

<myCarousel>
  <myCard *ngFor="let card of cards" [card]="card"></myCard>
</myCarousel>

问题是轮播组件需要初始化以在 * ngFor完成后运行，否则将无法正确显示。

由于数据来自Web服务调用，我无法猜测确切的时间，但是当* ngFor完成时，我需要使用carousel组件隐式或显式地观察。有人可以帮忙吗？谢谢！

Answer 1

ngFor上次尝试的火灾事件如下

<myCard *ngFor="#card in cards;  #last=last" [card]="card" [attr.ready]="last ? false : true"></myCard>

并在代码中执行此操作

@Input()
set ready(isReady: boolean) {
    if (isReady) someCallbackMethod();
}

希望这会有所帮助：）

Answer 2

您可以使用ContentChildren。

@ContentChildren(MyCardComponent) cards: QueryList<MyCardComponent>;

ngOnAfterContentInit() {
   this.cards
      .changes
      //.debounce(100) /* maybe add an additional debounce time.. */
      .subscribe(cards => {
         // received new cards..
   });
}

Answer 3

还有另一个Stackoverflow答案已经解决了问题： https://stackoverflow.com/a/36750875/463893

我的解决方案非常相似：一个指令（称为CarouselItem）应用于* ngFor内的轮播元素，定义一个布尔输入，告诉该元素是否是最后一个，以及一个属性（或者甚至是一个）可以设置为在到达最后一个元素时调用的函数。

因此模板变为：

<myCarousel #carousel>
  <myCard *ngFor="let card of cards; let l = last"
           [card]="card"
           CarouselItem
           [ready]="l ? true : false"
           [init]="carousel.initialize">
  </myCard>
</myCarousel>

变量#carousel需要能够从myCard指令引用carousel组件（[init] =“carousel.initialize”）。

以下是该指令的代码：

@Directive({
  selector: `[CarouselItem]`
})
export class CarouselItem {

  @Input('init') onInit: Function = () => {};

  @Input() set ready(isReady: boolean) {
      if (isReady)
        setTimeout(()=>this.onInit(), 200);
  };
}

最后，轮播组件包含一个公共初始化方法。

public initialize= ()=> {
    // perform initialisation
};

Angular 2 - 当* ngFor完成父组件

3 个答案: