将事件传递给二级子组件答案

【问题标题】：Passing event to second level child component将事件传递给二级子组件
【发布时间】：2017-02-07 13:48:11
【问题描述】：

在我的 Angular 2 ngrx 应用程序中，我的结构包含嵌套元素：

parentContainer.ts
@Component({
  template: `<parent-component
    (onEvent)="onEvent($event)"
  ></parent-component>`,
})

class ParentContainer {
  constructor(private store: Store<IState>) { }

  private onEvent = (payload: IEventPayload) {
    this.store.dispatch(new EventAction(payload));
  }
}

parentComponent.ts
@Component({
  selector: 'parent-component',
  templateUrl: 'patent.html',
})

class ParentComponent {
  @Output() private onEvent = new EventEmitter<IEventPayload>();
}

patent.html
<div>
  ...some content

  <child-component></child-component>
</div>

在这种情况下，我可以从父组件发出事件，但我需要从子组件发出。

有没有办法通过父组件将事件传递给子组件，然后使用类似这样的东西：this.onEvent.emit({... some payload})？

【问题讨论】：

标签： angular typescript ngrx

【解决方案1】：

在您的专利.html 中，您可以让子组件直接通过 onEvent 发出，如下所示：

<child-component (onChildEvent)="onEvent.emit($event)">
</child-component>

【讨论】：

【解决方案2】：

在子组件中：

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

... 在类正文中：

@Output() onMyEvent = new EventEmitter<boolean>();

... 通话事件

this.onMyEvent.emit(true);

在模板中：

<child-component (onChildEvent)="onEvent.emit($event)">
</child-component>

在父组件中：

  onChildEvent(boolean){
    alert("Event now!");
  }

【讨论】：