如何在 Angular+ 模板绑定中对更新可观察值的输入和离开进行动画处理？

Question

plnkr：

https://plnkr.co/edit/ka6ewgpo1tgnojrzyr3r?p=preview

我有一个会更改加班的订阅：

  ngOnInit(){
    this.route.snapshot.data.remote.subscribe(x => {
      this.obs$ = x[0];
    });
  }

我有一个模板work-post.component.html显示这些更改：

  <h1>{{obs$.title}}</h1>
  <p>
    {{obs$.paragraph}}
  </p>

问题：

当obs$获取每个下一个/新值时，是否有可能对Enter和留下这些值的动画进行动画。obs$.title obs$.paragraph绑定可以具有" crossfade"，例如淡入旧文本，在新文本中淡入有关变更的文字？如果是这样，我该如何在组件和模板内实现此动画：

组件：

import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'work-post',
  templateUrl: 'work-post.component.html',
  styleUrls: ['work-post.component.scss'],
})
export class WorkPostComponent implements OnInit{
  public obs$;
  constructor(private route: ActivatedRoute){}
  ngOnInit(){
    this.route.snapshot.data.remote.subscribe(x => {
      this.obs$ = x[0];
    });
  }
}

这是UI当前外观的视频。

Answer 1

如果我理解很好，则在obs$更改值时要应用X方法(动画(。因此，我认为您需要一个听众。

为此，我会去 DoCheck。

在组件中：

import { Component, DoCheck, ElementRef, OnInit } from '@angular/core';
export class MyClass implements OnInit, DoCheck {
ngDoCheck() {
    if(this.obs$ !== 'whateverValue') {
      // Apply an animation because this.obs$ changed
    }
}

文档：https：//angular.io/docs/ts/latest/api/core/index/docheck-class.html

更新1：

我建议您存储一个this.obs$ IN的初始版本，例如this.obs_initial。

和在侦听器中的逻辑中，您可以比较两者，如果this.obs$与其先前的值不同(this.obs_initial(，则表示this.obs$更改，因此我们触发了x动画。