Наблюдаемая труба Angular CLI

Я пытаюсь создать канал, который принимает отметку даты и времени и возвращает, сколько времени прошло с того времени.

У меня есть следующий канал, который возвращает продолжительность один раз, но мне нужно, чтобы этот канал увеличивался каждую секунду, чтобы дать эффект таймера:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'duration' })
export class DurationPipe implements PipeTransform{
  transform(value: any){
    var now = moment(new Date());
    var end = moment(value);
    var dif = moment.duration(now.diff(end));
    var toReturn = [];
    if(("00" + dif.hours()).slice(-2) != "00"){
      toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2);
    }
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2);
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2);
    return toReturn.join(':');
  }
}

Я посмотрел на асинхронный канал, но не могу заставить его работать так, как я хочу.

Любые решения?


angular observable angular-cli angular-pipe
person mwild    schedule 30.08.2017    source источник
comment
Я предполагаю, что вам нужно накормить канал значением, которое увеличивается каждую секунду.   -  person Hinrich    schedule 30.08.2017
comment
как кли имеет отношение к вашему вопросу?   -  person Jota.Toledo    schedule 30.08.2017
comment
@ Jota.Toledo Просто чтобы убедиться, что любые ответы были направлены на Cli, если нужны какие-либо пакеты.   -  person mwild    schedule 30.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

Компонент Pipe передает значение из шаблона и преобразует новое значение. Вы не должны использовать Pipe для расчета продолжительности времени и периодического обновления представления, потому что Pipe не будет обновляться, если значение не изменится. (Все каналы по умолчанию являются чистыми каналами!)

Я думаю, вы должны реализовать это в своем компоненте, а не в Pipe.

person Will Huang    schedule 30.08.2017

arrow_upward
1
arrow_downward

Черпая вдохновение из комментария, оставленного @Hinrich

Решил перейти в текущем времени на трубу. Изменение этого значения вызовет изменение канала. Это позволяет повторно использовать логику вычисления разницы в два раза в моем приложении.

Чтобы это отображалось как таймер, я устанавливаю функцию тайм-аута, которая обновляет текущий аргумент времени в компоненте, где используется канал.

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'duration'})
export class DurationPipe implements PipeTransform{
  transform(value: any, now: any){
    var end = moment(value);
    var dif = moment.duration(now.diff(end));
    var toReturn = [];
    if(("00" + dif.hours()).slice(-2) != "00"){
      toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2);
    }
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2);
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2);
    return toReturn.join(':');
  }
}

затем в компоненте

@Component({
  moduleId: module.id,
  templateUrl: 'pending.template.html',
  styleUrls: ['../orders.scss']
})

export class PendingComponent implements OnInit {

  orders: any[];
  now = moment(new Date());

  constructor(private route: ActivatedRoute, private router: Router, private orderService: OrderService, public dialog: MdDialog ){}

  ngOnInit() {
    Observable.interval(1000).subscribe(x=>{
      this.now = moment(new Date());
    })
  }
}

с html

{{order.createdAt | duration:now}}
person mwild    schedule 30.08.2017