Question

＆＃34;管道＆＃34;值last不会更新，除了我重新创建管道对象。这不是我预期的行为，因为我正在以这种方式构建一个计时器。

@Pipe({
  name: 'fromNow'
})
export class FromNowPipe {
  transform(value: any, args: Array<any>): string {
    return moment(value).fromNow();
  }
}

@Component({
    selector: 'event-spinner',
    changeDetection: ChangeDetectionStrategy.Default, // all other modes does not work at all
    pipes: [FromNowPipe],
    template: `
<div class="col-xs-5">
    NOT updating: {{ last | fromNow }} <br/>
    Updating: {{ lastText }} <br/>
</div>
  `
})
export class EventSpinner implements OnInit {
    last: moment.Moment;
    lastText: string;

    ngOnInit(): void {
        this.last = moment();
        let obs = Observable.interval(1000).subscribe(() => {
            // this.last = moment(this.last); // uncommenting this line it updates
            this.lastText = this.last.fromNow();
            this.cdRef.detectChanges(); // commenting this line breaks everything 

        });
    }

}

如何以干净的方式解决此问题？即避免添加额外的对象（如lastText）或每次从自身复制时刻对象。

提前致谢!!

Answer 1

我认为这是因为时刻在Angular2的范围之外被实例化，所以你需要在区域内执行：

constructor(private ngZone:NgZone) { // <-----
}

ngOnInit(): void {
 this.ngZone.run(() => { // <-----
    this.last = moment();
    let obs = Observable.interval(1000).subscribe(() => {
        // this.last = moment(this.last); // uncommenting this line it updates
        this.lastText = this.last.fromNow();
        this.cdRef.detectChanges(); // commenting this line breaks everything 

    });
  });
}

修改

实际上，fromNow方法更新this.last属性的内容而不是其引用。 Angular2根据参考变化检测变化。您实际使用he opens DHC for the first time做了什么。

管道值不更新

1 个答案: