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绑定可以有“交叉渐变”，例如淡出旧文本，淡化新文本的变化？如果是这样，我怎么能在我的组件和模板中实现这个动画：

成分：

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当前外观的video。

Answer 1

如果我理解得很好，您希望在<tbody> <tr *ngFor="let audit of audits "> <td>{{ audit.installDate | date:"medium" }}</td> <td>{{ audit.appName }}</td> <td>{{ audit.environment }}</td> <td>{{ audit.userName }}</td> /*This is the line with the string[] <td>{{ audit.fqdNs }}</td> </tr> </tbody>更改值时应用X方法（动画）。所以，在我看来，你需要一个倾听者。

为此，我会选择export class HomeComponent implements OnInit { public audits: AuditItem[]; constructor(private _dataService: AuditService) { } ngOnInit() { this._dataService .getAll() .subscribe((data: AuditItem[]) => this.audits = data, error => console.log(error), () => console.log("getAllItems() complete from init " + this.audits )); }。

在组件中：

obs$

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

更新1：

我建议您将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 } }中。

在侦听器的逻辑内部，你比较两者，如果this.obs$与之前的值（this.obs_initial不同），那么意味着this.obs$发生了变化，因此我们触发了X动画。 / p>

如何在Angular +模板绑定中为更新Observable值的输入和离开设置动画？

的 Plnkr:

的问题：

1 个答案: