Angular 2 - 当* ngFor在父组件上完成调用功能时

我正在尝试为我的Angular 2应用程序创建一个轮播组件。Angular 2 - 当* ngFor在父组件上完成调用功能时

我想传送带是通用的，这样它会支持这两种情况下：

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

和更通用

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

的问题是，转盘组件需要初始化到在之后运行* ngFor已完成，否则将无法正确显示。由于数据来自Web服务调用，我无法猜测确切的时间，但是当* ngFor完成时，我需要轮播组件观察，隐式或显式地观察。任何人都可以帮忙吗？谢谢！如下

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

，并在代码上的ngFor最后一次尝试

来源

2016-12-02 udik

还有另一个＃1回答已经解决了这个问题： https://stackoverflow.com/a/36750875/463893

我的解决方法是非常相似的：一个指令（称为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 initialize=()=> { 
    // perform initialisation 
};

来源

2016-12-14 18:23:19 udik

火灾事件做到这一点

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

希望这有助于:)

来源

2016-12-02 11:03:56 anshuVersatile

谢谢，但你能更清楚一点吗？在哪个组件中定义了ready属性？我试图在传送带组件上定义它，但我似乎无法引用它。这是我试过，扰乱模板编译:) – udik

你可以使用ContentChildren。

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

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

来源

2016-12-02 11:06:00 mxii

不，我不认为这会起作用，因为我希望卡片是完全通用的 - 它可以是MyCard或MyPicture或其他任何东西。否则，我最终会得到一个与某种特定类型的内容紧密绑定的轮播组件。 – udik

Angular 2 - 当* ngFor在父组件上完成调用功能时

回答

相关问题