@Component({
selector: "parent",
template: `<child [userId]="(userID$ | async)"></child>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent implements OnInit {
userID$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
constructor(private router: Router) { }
ngOnInit() {
this.router.queryParams.subscribe(params => {
//notify child component with new user ID
this.userID$.next(params["id"])
});
}
}
@Component({
selector: "child",
template: `<div *ngIf="(userState$ | async) && userId">
{{(userState$ | async).user.id)}}
</div>`,
changeDetection: ChangeDetectionStrategy.Default
})
export class ChildComponent implements OnChanges {
@Input() userId: string;
private userState$: Observable<User>;
constructor(private store: Store<store.AppState>) { }
ngOnChanges(changes: SimpleChanges) {
//update the userState based on the userId received
this.userState$ = this.store
.select(state => state.user-list)
.map(userList => userList[this.userId])
.filter(user => !!user);
}
}
The Child component receives the user ID from the Parent and finds the corresponding user in the ngrx store (userList), but the view of the Child component is not being re-rendered. Everything works well when the ChangeDetectionStrategy for the Child component is set to default. What could be causing this issue? Using Angular version 2.4