Как спроектировать несколько таймеров с помощью Angular2?

Question

как сделать, чтобы несколько таймеров запускались одновременно?
Вместо написания кода ниже для каждого таймера, как поступить с плагином или директивой, чтобы все таймеры могли запускать и останавливать триггеры одновременно.Я попытался с помощью приведенного ниже кода, используя директиву, но как использовать формат 00: 00: 00, потому что он принимает форматы 15666666666, как изменить только секунды и минуты.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:     `
  <p  (everySecond)="ping8 = $event" (everyTwoSeconds)="ping9= $event" (everySecond)="ping6 = $event" (everyTwoSeconds)="ping7 = $event" (everySecond)="ping1 = $event" (everyTwoSeconds)="ping2 = $event" (everySecond)="ping3 = $event" (everyTwoSeconds)="ping4= $event"  >
    Every Second: {{ ping1 }}<br />
    Every Two Seconds: {{ ping2 }}<br />
    Every Second: {{ ping3 }}<br />
    Every Two Seconds: {{ ping4 }}<br />
    Every Second: {{ ping5 }}<br />
    Every Two Seconds: {{ ping6 }}<br />
    Every Second: {{ ping7 }}<br />
    Every Two Seconds: {{ ping8 }}<br />
    Every Second: {{ ping9 }}<br />
    Every Two Seconds: {{ ping10 }}<br />
    Every Second: {{ ping11 }}<br />
    Every Two Seconds: {{ ping2 }}<br />
    Every Second: {{ ping1 }}<br />
    Every Two Seconds: {{ ping2 }}<br />
    Every Second: {{ ping1 }}<br />
    Every Two Seconds: {{ ping2 }}<br />
  </p>
`,
  styleUrls: ['./app.component.less']
})
export class AppComponent {
// tslint:disable-next-line:no-inferrable-types
public ping1: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping2: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping3: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping4: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping5: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping6: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping7: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping8: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping9: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping10: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping11: number = 0;
// tslint:disable-next-line:no-inferrable-types
public ping12: number = 0;
}


ping.directive.ts

// Import the core angular services.
import { Directive } from '@angular/core';
import { ElementRef } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { OnDestroy } from '@angular/core';
import { OnInit } from '@angular/core';

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

// Notice that we have TWO ATTRIBUTE SELECTORS defined in our directive selectors. This
// way, you can use [everySecond], [everyTwoSeconds], or BOTH at the same time.
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[everySecond] , [everyTwoSeconds]',
// tslint:disable-next-line:use-output-property-decorator
outputs: [
// tslint:disable-next-line:indent
'everySecond',
'everyTwoSeconds'
]
})
export class PingDirective implements OnInit, OnDestroy {

public everySecond: EventEmitter<number>;
public everyTwoSeconds: EventEmitter<number>;

private timers: number[];

// I initialize the ping directive.
constructor( elementRef: ElementRef ) {

this.everySecond = new EventEmitter();
this.everyTwoSeconds = new EventEmitter();
this.timers = [];

// Log that this constructor was called so that we can see what happens when both
// of our directive selectors are matched on the same element at the same time.
console.group( 'PingDirective instantiated.' );
console.log( elementRef.nativeElement );
console.groupEnd();

}

// ---
// PUBLIC METHODS.
// ---

// I get called once when the directive is being destroyed.
public ngOnDestroy(): void {

this.timers.forEach( clearInterval );

}
// I get called once after the inputs have been bound for the first time.
public ngOnInit(): void {

this.timers.push(setInterval((): void => {this.everySecond.emit( Date.now() );
}, 1000), setInterval((): void => {this.everyTwoSeconds.emit( Date.now() );},1000));}

}