Angular 2 ngFor 更新视图生命周期钩子

【问题标题】：Angular 2 ngFor Update View Lifecycle HookAngular 2 ngFor 更新视图生命周期钩子
【发布时间】：2017-01-23 18:28:16
【问题描述】：

我希望在更新通过 *ngFor 绑定到模板 html 的值数组后触发动画。

为了让我的动画有意义，我需要在视图使用最新值更新后触发它。

我想知道当视图完成更新时，我是否可以挂钩生命周期中的某个点？或者如果我可以调用一些东西来触发视图立即更新最新的值？

【问题讨论】：

标签： typescript angular lifecycle angular2-template

【解决方案1】：

我想知道当视图完成更新时，我是否可以挂钩生命周期中的某个点？

您可以有一个指令来包装ngFor 中的每个元素。这个指令只能在第一次渲染时做动画。

【讨论】：

感谢您的快速回复！当视图完成更新 ngFor 中的子级时，我实际上需要在父级（和父级的兄弟姐妹）上触发动画。
您可以从指令元素的parentNode 中获取父元素

【解决方案2】：

  animations: [
    trigger('fadeInOutTranslate', [
      transition(':enter', [
        style({opacity:0}),
        animate(300, style({opacity:1}))
      ]),
      transition(':leave', [
        style({transform: 'translate(0)'}),
        animate(300, style({opacity:0}))
      ])
    ])
  ],

我没有测试它，但它可以与 *ngIf 一起使用，所以为什么不与 *ngFor 一起使用，也许你会找到进入角度动画属性的方法。

https://angular.io/docs/ts/latest/guide/animations.html

【讨论】：