jquery - Angular 2 : *ngFor cause CSS problems

Question

我正在构建一个带有 coverflow 效果的 slider ，我使用了 jquery-flipster插件。

我可以导入它并使其像演示一样工作，但是当我想用 *ngFor 指令动态地执行它时，结果只是一个没有 coverflow 效果的简单列表。

我做了这样的工作版本:

<div id="coverflow">
        <ul class="flip-items">
            <li>
                <img src="../../../img/text1.gif">
            </li>
            <li>
                <img src="../../../img/text2.gif">
            </li>
            <li>
                <img src="../../../img/text3.gif">
            </li>
            <li>
                <img src="../../../img/text4.gif">
            </li>
            <li>
                <img src="../../../img/text5.gif">
            </li>
            <li>
                <img src="../../../img/text6.gif">
            </li>
        </ul>
    </div>

但是使用 *ngFor 指令我得到了这个:

代码:

<div id="coverflow">
    <ul class="flip-items">
        <li *ngFor="let tab of tabs">
            <img [src]="tab.url">
        </li>
    </ul>
</div>

tabs 是一个数组，我在其中存储了我所有的图片 url(在 JSON 文件中)。

Answer 1

ngOnInit() 方法在生命周期中调用 $('...').flipster() 还为时过早已注入(inject)一个组件，但尚未生成 DOM，因此当您调用 flipster() 时，它发出的查询将返回空值，插件无法执行任何操作。

您应该使用 ngAfterViewInit() 生命周期方法，一旦 View 和内容已通过 Angular 配置，该方法将被调用。有关所有 Hook 的概述，请查看 the docs .

最后，如果您的基础列表要发生变化，那么您需要将变化通知 flipster 插件。我不确定这是否像再次调用 $('...').flipster() 一样简单，或者您是否需要执行其他操作来跟踪更改。 flipster 文档似乎没有提到这种情况。