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