Question

在子组件中我有一个计数器。当计数器清楚时，我想报告父组件。我做了几次尝试但没有成功。

timer.component.ts

(1, 1)
(1, 2)
(2, 1)
(2, 2)

当计数器为零时，如何通知父组件？

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/

当时间用完Angular5时发送事件

2 个答案: