Javascript 同级组件不接收发出的更改

Javascript 同级组件不接收发出的更改,javascript,angular,Javascript,Angular,在Angular 9项目中,我有两个组件,它们是同级组件和父组件。在组件A中更改时,我会发出一个值,并在父组件中设置该值,并在组件B中调用一个方法。组件B中的方法发出另一个值,并在父组件中设置该值。组件A中的on更改仍在继续,但在父组件中设置的组件B发出的值(这是组件A中的输入)未更改。我不知道为什么它不是组件A的输入,即使父级更新了值,也不会更改 父组件 setSomeNum(someNum: number) { // this is run on someNumberEmitter

在Angular 9项目中,我有两个组件,它们是同级组件和父组件。在
组件A
中更改时,我会发出一个值,并在
父组件中设置该值,并在
组件B
中调用一个方法。
组件B
中的方法发出另一个值,并在
父组件中设置该值。
组件A
中的on更改仍在继续,但在
父组件
中设置的
组件B
发出的值(这是
组件A
中的输入)未更改。我不知道为什么它不是
组件A的输入,即使父级更新了值,也不会更改

父组件

setSomeNum(someNum: number) {
    // this is run on someNumberEmitter in Component A
    this.num = someNum;
    if (this.viewChildComponentB) {
        this.viewChildComponentB.remove(someNum);
    }
}
setSomeOtherNum (someOtherNum: number) {
    // this is run on someDiffNumEmitter in Component B
    this.otherNum = someOtherNum
}
A部分

componentAOnChange(someNum: number) {
    this.someNumberEmitter.emit(someNum);
    // this.inputFromComponentB is the original value instead of the one emitted in Component B (this.someDiffNum)
    this.someService.applyCalc(someNum, this.inputFromComponentB);
}
B部分

remove(someNum: number) {
    this.someDiffNumEmitter.emit(this.someDiffNum);
    this.someService.applyCalc(someNum, this.someDiffNum);
}

我正在使用
OnPush
更改检测策略,但没有任何更改。同级组件A如何在组件B的数据发生更改的情况下运行?

我不确定您为什么在那里使用ViewChild,但如果它是在发生更改时手动更新子组件,那么这应该是一个红色标志,表示出现了错误,如果您有需要共享的数据,则应全面共享,并根据单个数据源的更改进行相应更新,而无需手动更新其余位置

现在谈谈你的问题:

如果您使用的是
OnPush
更改检测策略,则必须以不变的方式更新数据或使用可观察的对象,否则更改检测将不会触发

有些人会建议手动触发更改检测,但我建议避免这种情况,因为使用OnPush的全部目的是避免不必要地呈现整个页面

我喜欢使用的一个简单解决方案是将
主题
行为主题
与异步管道一起使用。通过这种方式,它可以确保OnPush更改检测策略的顺利工作,因为当Observable发出新值时,ChangeDetection将运行,
async
管道会为您取消订阅Observable

如果我要修改您当前的组件,它将如下所示:

家长:

num$=新主题();
otherNum$=新主题();
设置场景(someNum:number){
this.num$.next(someNum);
}
setSomeOtherNum(someOtherNum:number){
//这是在组件B中的某个DiffNuMemitter上运行的
this.otherNum$.next(someOtherNum)
}