Отправить событие, когда истечет время Angular5

Question

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

timer.component.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.scss']
})
export class TimerComponent implements OnInit {

  private timeString : string;
  private duration = 5;
  private seconds = "--";
  private minutes = "--";   
  private clockDisplay : string;
  private interval: number;

  constructor() { }

  ngOnInit() {
    this.tickTick(121)
  }

  tickTick(duration) {
    this.duration = duration
    if (this.duration > 0) {
      this.interval = window.setInterval(() => {
        this.duration = this.duration - 1
        if (this.duration <= 0) {
          clearInterval(this.interval)
        }
        if (this.duration % 60 < 10) {
          this.seconds = "0" + this.duration % 60
        } else {
          this.seconds = (this.duration % 60).toString()
        }

        if (this.duration / 60 < 10) {
          this.minutes = "0" + parseInt("" + this.duration / 60, 10)
        } else {
          this.minutes = "" + parseInt((this.duration / 60).toString(), 10)
        }

        this.clockDisplay = this.minutes + " : " + this.seconds;

        if(this.minutes === '00' && this.seconds === '00'){
          // I want send event when minutes and seconds == 0
        }

        document.body.innerHTML = this.clockDisplay
      }, 1000);
    }
  }

}

Как заставить уведомлять родительский компонент, когда счетчик обнуляется?

Answer 1

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

import { Component, Output, EventEmitter } from '@angular/core';

//...

export export class TimerComponent implements OnInit {


  @Output() timerEvent= new EventEmitter<any>();

   if(this.minutes === '00' && this.seconds === '00'){
          this.timerEvent.emit(value)//modify it accordingly
    }

  }
}

EventEmitter объект имеет метод emit(), который передает событие до родительского компонента.

В шаблоне родительского компонента определите привязки событий как часть селектора дочернего компонента. Привязка должна указывать на метод, определенный в классе родительского компонента, который выполняет действия с данными, полученными от дочернего элемента. $ event содержит полезную нагрузку, излучаемую дочерним элементом:

Шаблон родительского компонента: app.component.html

 <timer (timerEvent)=onEvent($event)">
    </timer>

или вы можете напрямую назначить захваченное событие свойству данных.

<timer (timerEvent)="data=$event">
        </timer>

app.component.ts

export class AppComponent {
  public data: any;

  onEvent(data) {
        this.data = data;
      }
}

Answer 2

Создать выход из дочернего компонента, чтобы выбросить событие в родительский компонент. Смотрите пример: https://codecraft.tv/courses/angular/quickstart/user-interaction-and-outputs/