redux를 사용하여 특정 구성 요소를 업데이트합니다.

Question

Im redux를 사용하여 구성 요소에서 다른 구성으로 펼치기 이벤트를 전달합니다.

이러한 구성 요소는 테이블 내에서 사용됩니다

<table class="table table-bordered"> 
    <thead> 
     <tr> 
     <th *ngFor="let business of businesses"> 
      <app-business-header-cell [business]="business"></app-business-header-cell> 
     </th> 
     </tr> 
    </thead> 
    </table> 

내 헤더 구성 요소 :

export class BusinessHeaderCellComponent implements OnInit { 

    @Input() 
    business: Business; 

    @select() columnState$: Observable<any>; 

    constructor(private ngRedux: NgRedux<IAppState>) { } 

    ngOnInit() { 
    } 

    onClickExpand(){ 
    this.ngRedux.dispatch({ type: 'EXPAND', id: this.business.id }); 
    } 

    onClickCollapse(){ 
    this.ngRedux.dispatch({ type: 'COLLAPSE', id: this.business.id }); 
    } 

} 

파견 및 상태 업데이트하는 것은 잘 작동하고 있습니다.

제 문제는 내 작업 EXPAND를 디스패치 할 때 다른 모든 헤더 구성 요소가 가로 챌 수 있다는 것입니다. 어떤 구성 요소를 업데이트해야하는지 구분할 수있는 방법이 있습니까?

Answer 1

내가 함께 왔어요 가장 간단한 해결 방법 : 뒷조사 후

export class BusinessHeaderCellComponent implements OnInit { 

    @Input() 
    business: Business; 

    @select() columnState$: Observable<any>; 

    constructor(private ngRedux: NgRedux<IAppState>) { } 

    ngOnInit() { 
    // ADDED THIS 
    this.columnState$.subscribe(state => { 
     if(this.business.id == state.id) this.isExpanded = state.isExpanded; 
    }); 
    } 

    onClickExpand(){ 
    this.ngRedux.dispatch({ type: 'EXPAND', id: this.business.id }); 
    } 

    onClickCollapse(){ 
    this.ngRedux.dispatch({ type: 'COLLAPSE', id: this.business.id }); 
    } 

}