以下是关于onPush变化检测策略的未知。如果发生以下任一情况,则触发OnPush更改检测
Async
管道收到了一个活动。从上面的列表中,An input was updated
必须是引用更改,因此输入必须是不可变的。
这是我的情景。
我有父组件Parent
,我订阅了一个observable来从API调用中获取数据,我通过@Input
将这些数据传递给子组件。
父组件
@Component({
template: '<child-component [data]="data"></child-component>'
})
export class ParentComponent implements OnInit {
this.dataService.get().subscribe(data => {this.data = data})
}
子组件
@Component({
selector: 'child-component',
template: '{{data.name}}',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
@Input() data;
constructor() {
console.log(this.data)
// undefined, because the data is async response and not available while bootstrapping.
}
ngAfterContentChecked() {
console.log(this.data) // available
}
}
这里的问题是,如果我们将onPush
更改检测策略添加到子组件并且输入引用未更改,则更改不会从父级传播到子级。原因是因为onPush
策略期望输入是不可变的。如何克服这种情况?
非常感谢任何帮助。
更新
在谷歌上搜索我发现{{3>} Victor Savkin
如果组件仅依赖于其输入属性,并且它们是可观察的,则当且仅当其中一个输入属性发出事件时,此组件才会更改。
那么我们可以将observables
传递给输入并修复此问题吗?如果是这样,请提出一个有效的解决方案。
请注意,我不想在模板中使用asyn
管道或手动触发更改检测。