实施例

Question

我目前正在开发一个Angular2应用程序，并面临着有关房地产变更和生命周期事件的问题。

让我们说我有一个基于属性呈现的简单模板。我希望#container保持隐藏直到渲染完成，然后将visible类添加到其中以使其显示。

<div id="container">
    <p *ngFor="let value in values">
        {{value}}
    </p>
</div>

问题

问题是.visible也定义了转换，浏览器根本无法同时处理Angular的渲染和转换，因此它只是暂停了一会儿，然后#container只是抓住了。

设置足够长的转换时间可以解决问题，但我不想改变它。

我也研究过Angular's life cycle个钩子，但它们似乎都不符合我的特殊需要。

我希望在Angular完成呈现#container的内容后收到通知，以便我可以添加visible类，而不进行其他工作，并且平稳过渡。 / p>

非常感谢任何和所有帮助。

Answer 1

Mark Rajcok的评论让我思考，我已经找到了不同的方法，可以在下一个可能的时刻采取行动，包括setTimeout，requestAnimationFrame，最后是setImmediate。

我决定选择setImmediate，因为它似乎是将动作推迟到下一个浏览器时间点的最直接方式。

请注意，setImmediate现在只是一个提案，我只能使用它，因为core-js已经实现了它。它甚至可能不会成为未来的标准。

注意：此方法不会成为标准，并且仅由最近版本的Internet Explorer和Node.js 0.10+实现。它遇到了Gecko（火狐）和Webkit（谷歌/苹果）的阻力。