Question

我有一个父级和子级组件，我希望父级能够在子级中触发一个函数，同时还允许子级在父级中触发一个函数。这是我为孩子触发父母中的函数所要做的事情：

孩子

@Output() callParentFunction = new EventEmitter<any>();
...
this.callParentFunction.emit();

父母

  template: `
    <child-component
      (callParentFunction)="parentfunction($event)"
    >
    </child-component>
  `

这可以触发parentfunction，但是我应该如何去做呢？我需要一个由父级事件发射器触发的子级函数。

Answer 1

尝试这样

父母

template: `
    <child-component
      [events]="eventsSubject.asObservable()"
    >
    </child-component>
  `
private eventsSubject: Subject<void> = new Subject<void>();
anyfunction(){  
    this.eventsSubject.next()
 }

孩子

@Input() events: Observable<void>;
ngOnInit() {        
  this.events.subscribe(() => 
  //do something
 );   
}

Answer 2

我发现Angular Event Service可以很好地工作。

https://dev.to/jwp/the-angular-event-service-ech

Answer 3

您可以使用ngOnChanges()。这样您就可以处理。

As Angular docs says:

在默认更改后立即调用的回调方法检测器已检查数据绑定属性，如果至少一个具有更改，并且在检查视图和内容子级之前。

@Component({selector: 'child', template: `...`})
class ChildComponent implements OnChanges {
  // TODO(issue/24571): remove '!'.
  @Input()
  prop: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

，然后从父组件更新某个对象foo，然后触发ngOnChanges方法：

<child-component
  [events]="eventsSubject.asObservable()"
  [prop] = "foo"
>
</child-component>

如何使用事件发射器在子组件和父组件中触发功能？

3 个答案: