1

问题示例：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

4

3 回答 3

3

它不起作用，因为 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 示例。它简单且可重用，因此我会为小数据推荐此解决方案。

虽然，它也可以通过在每次日期更新后使用ChangeDetector及其markForCheck()方法来解决 - 这个会更有效。或者正如 Dmitry 所说，每次您想要更改数据时只需创建新的日期对象。

于 2016-11-10T22:30:49.850 回答
2

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

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

如文档中所述

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

于 2016-11-10T22:30:27.043 回答
1

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

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

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

于 2016-11-10T22:16:58.537 回答