Добавление службы даты/времени в Angular 2

Question

Я пытаюсь настроить очень простой сервис в Angular 2. Цель состоит в том, чтобы отображать текущую дату и время, когда пользователь нажимает кнопку. Когда я использую этот код, я получаю следующее сообщение об ошибке:

Error during evaluation of "click" ORIGINAL EXCEPTION: TypeError: l_context.whatTime is not a function

Время компонента:

@Component({ 
    template: ` 
     <h1>Time Test</h1> 
     <button (click) = "whatTime()">Time</button> 
     <h2>{{now}}</h2> 
     ` 
}) 

    export class TimeComponent { 
     now = Date(); 
     constructor(public timeService: TimeService) { 
     this.now = timeService.whatTime(); 
    } 
} 

Услуги:

@Injectable() 
    export class TimeService { 

     whatTime() { 
     return new Date(); 
    } 
} 

Любые мысли о том, что я делаю неправильно ?

Answer 1

Используйте это вместо

Plunker

<button (click) = "now = timeService.whatTime()">Time</button> 

, но это может вызвать ошибку DevMode.

Лучше всего было бы добавить Observable к услуге, которая уведомляет о времени изменения в заранее определенном интервале

@Injectable() 
export class TimeService { 

    constructor() { 
    this.whatTime = Observable.interval(1000).map(x => new Date()).share(); 
    } 
} 

<!-- <button (click) = "whatTime()">Time</button> --> 
    <h2>{{timeService?.whatTime | async}}</h2> 

Answer 2

I have found that @günter-zöchbauer 's observable-based solution takes a little while to load up (atleast in plnkr) ... haven't done official performance tests but ....

Вот простой способ сделать часы реального времени без используя rxjs.

(см Plunker of this working over here)

Вы можете использовать его в шаблоне так:

<p>{{ now }}</p> 

<!-- OR something like --> 

<h2>{{ now | date:'yMMMdjms' }}</h2> 

Вот определение класса компонента:

class ClockComponent { 
    interval; 

    now = new Date(); 

    constructor(){ 
    this.interval = setInterval(()=> { 
     this.now = new Date() ; 

    }) 
    } 

    ngOnDestroy(){ 
    clearInterval(this.interval) 
    } 

} 

Вот так!