Question

问题示例：http://plnkr.co/edit/7FeRoyyqDnjXpV9Q9Vpy?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{myDate}}</h2> <!-- THIS UPDATES AS EXPECTED -->
      <h2>{{myDate | date: 'longDate'}}</h2> <!-- THIS DOES NOT -->
      <a (click)="prevMonth()" href="javascript:;">Previous Month</a>
      <a (click)="nextMonth()" href="javascript:;">Next Month</a>
    </div>
  `,
})
export class App {
  myDate: Date;
  constructor() {
    this.myDate = new Date();
  }

  nextMonth() {
    this.myDate.setMonth(this.myDate.getMonth() + 1);
  }

  prevMonth() {
    this.myDate.setMonth(this.myDate.getMonth() - 1);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

当我在不使用任何管道的情况下传递变量时，它会按预期更新。但是，同一变量的DatePipe格式副本不会更新。管道是否仅针对可观察数据进行更新？或者我可以将它与标准日期类型一起使用并期望它实时更新吗？

我没有在DatePipe API中看到任何暗示这是预期行为的内容，但我已将其缩小到只有DatePipe以这种方式影响行为的程度。 https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Answer 1

它不起作用，因为Angular2的DatePipe是有状态的（pure属性在装饰函数中设置为true。有状态管道仅在给定对象上应用一次。您可以更改管道定义（当然不是A2源代码）或制作强制数据更改的内容。

所以解决它的第一种方法是创建和使用新的无状态管道：

@Pipe({name: 'myDate', pure: false})
export class MyDatePipe implements PipeTransform {
  transform(value: any, pattern: string = 'mediumDate'): string {
    return (new DatePipe()).transform(value, pattern);
  }
}

我准备了plnkr example。它简单且可重复使用，因此我建议使用此解决方案来处理小数据。

虽然在每次更新日期之后使用ChangeDetector及其markForCheck()方法也可以解决这个问题，但这个方法会更有效率。或者正如Dmitry所说，每次想要更改数据时都要创建新的日期对象。

Answer 2

似乎管道触发更新不是在更新链接对象之后，而是在更新了对象链接之后。

你可以通过重新分配 this.myDate 来修复它，如下所示：

this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() + 1));

Answer 3

您需要使用新的日期参考重新分配日期变量。

this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() + 1));

如文件中所述

此管道标记为纯，因此在输入发生变化时不会重新评估。相反，用户应将日期视为不可变对象，并在管道需要重新运行时更改引用

如何更新Angular2 DatePipe格式的日期？

3 个答案: