如何使用事件发射器触发子组件和父组件中的函数?

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

您可以使用ngOnChanges().所以你可以处理.

正如Angular docs所说：

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

@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>