Angular 2 - 当 *ngFor 完成对父组件的调用函数时

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 完成后运行 初始化，否则将无法正确显示。

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

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

还有另一个 Whosebug 答案已经解决了这个问题：

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

因此模板变为：

<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 指令 ( [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初始化方法。

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

Angular 2 - 当 *ngFor 完成对父组件的调用函数时

Angular 2 - when *ngFor completes call function on parent component

ngfor

angular