使用OnPush策略時，子組件的視圖不會被重新渲染

Question

@Component({ 
    selector: "parent", 
    template: `<child [userId]="(userId$ | async)"></child>`, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class ParentCmp implements OnInit { 
    userId$: BehaviorSubject<string> = new BehaviorSubject<string>(null); 

    constructor(private activatedRoute: ActivatedRoute) { } 
    ngOnInit() { 
     this.activatedRoute.queryParams.subscribe(query => { 
      //notify child with BehaviorSubject 
      this.userId$.next(query["userid"]) 
     } 
    } 
} 

@Component({ 
    selector: "child", 
    template: `<div *ngIf="(userState$ | async) && userId"> 
        {{(userState$ | async).user.id)}} 
       </div>`, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class ChildCmp implements OnChanges { 
    @Input() userId: string; 
    private userState$: Observable<User>; 

    constructor(private store: Store<store.AppState>) { } 
    ngOnChanges(changes: SimpleChanges) { 
     //when it gets userId it starts to track fit user in ngrx store 
     this.userState$ = this.store 
       .select(state => state.user-list)     
       .map(userList => userList[this.userId]) 
       .filter(user => !!user); 
    } 
} 

Child cmp從父級獲取userId並且需要用戶包含在ngrx store（userList）中，但是不會重新呈現子視圖。當兒童的ChangeDetectionStrategy是默認值時，它完美地工作。這裏有什麼可能是錯的？ 角V2.4

Answer 1

如果您在ngOnChanges()改變模型需要調用變化檢測明確地

export class ChildCmp implements OnChanges { 
    @Input() userId: string; 
    private userState$: Observable<User>; 

    constructor(
     private store: Store<store.AppState>, 
     private cdRef:ChangeDetectorRef 
    ) { } 
    ngOnChanges(changes: SimpleChanges) { 
     //when it gets userId it starts to track fit user in ngrx store 
     this.userState$ = this.store 
       .select(state => state.user-list)     
       .map(userList => userList[this.userId]) 
       .filter(user => !!user); 
     this.cdRef.detectChanges(); 
    } 
} 

或可能會更好做userStates$可觀察到的，並保持相同的實例，而不是每次都創建一個新的ngOnChanges被稱爲：

userId$: Subject<User> = new Subject<User>(); 

ngOnChanges(changes: SimpleChanges) { 
    //when it gets userId it starts to track fit user in ngrx store 
    this.store 
      .select(state => state.user-list)     
      .map(userList => userList[this.userId]) 
      .filter(user => !!user) 
      .subscribe((user) => this.userId.next(user)); 
}