javascript - 如何在 Angular 模板绑定(bind)中为更新的 Observable 值设置动画？

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$ 获取每个下一个/新值时，是否可以对这些值的进入和离开动画进行动画处理。 obs$.title obs$.paragraph 绑定(bind)是否可以有一个“淡入淡出”，例如淡出旧文本，在更改时淡入新文本？如果是这样，我如何在我的组件和模板中实现这个动画:

组件:

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];
    });
  }

}

这是一个 video 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$ 的初始版本存储在例如 this.obs_initial 中。

在监听器的逻辑中，你比较两者，如果 this.obs$ 不同于它之前的值 (this.obs_initial) 那么意味着 this.obs$ 已更改，因此我们触发了 X 动画。