Question

在我的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})？

Answer 1

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

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

Answer 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!");
  }

Angular 2将事件传递给第二级子组件

2 个答案: