부모로부터 자식으로 데이터 변경하기

Question

데이터 바인딩에 관한 질문이 있습니다. 지금

/*component ect*/ 

directives:[], 
template: `` 
export class secondChild{ 
@Input() allHistoryChannels:any; 
@Input() set showList(var:any[]){ 
console.log(var); 
/*another actions*/ 
}; 

그리고 문제 :

directives: [firstChild,secondChild], 
    template:' 
<first-child [showList]="showList" (emitShowList)="getShowList($event)"></history-months-avg-header> 
<second-child [showList]="showList" (emitShowList)="getShowList($event)"></history-months-avg-header> 
    ' 
    export class FlexProductListComponent { 
     private showList:any[]=[]; 

     getShowList(show:any[]){ 
      this.showList = show; 
      console.log('nowa list',this.showList); 
     } 

    } 

그리고 첫 아이 :

directives: [], 
     template:' 
<button (click)="showHistoryDetails();" ><i class="fa fa-angle-double-right" aria-hidden="true" ></i></button> 

export class firstChild{ 
    @Output() emitShowList = new EventEmitter<any[]>(); 
    @Input() showList: any[]; 
    public showHistoryStatus: boolean = false; 

    showHistoryDetails() { 

      if (this.showHistoryStatus) { 
       this.showHistoryStatus = false; 
       this.showList =    this.removeFromShowList(this.showList,this.HistoryComponent); 
       console.log('zmieniam na nie',this.showList); 
       this.emitShowList.emit(this.showList); 
      } else {    
       this.showHistoryStatus = true; 
       this.showList.push(this.HistoryComponent); 
       this.emitShowList.emit(this.showList); 

      } 
     } 

    ' 

와 두 번째 자식 내 프로젝트에서 나는 부모와 두 차일 부모가있다. 나는 첫 번째 자식의 버튼을 클릭하여 배열에서 항목을 추가 또는 제거하고 편집 된 배열 (showList)을 부모에게 내 보냅니다. 부모는 데이터를 가져 와서 showList 속성에서 현재 데이터를 덮어 씁니다. showList 속성의 새 값은 모든 바인드 된 자식에게 전달되어야합니다. 하지만 제대로 작동하지 않습니다. 두 번째 하위 로그는 표시 목록이 비어있는 경우 시작시에만 기록됩니다. 나는 항상 부모 속성을 덮어 씌울 때이 속성이 자식과 바인딩되면 저장 후 새 값이 모든 바인딩 된 자식에게 보내집니다. 잘못된 것처럼 보입니다. 어떻게 작동합니까? 누군가가이 문제를 해결하는 방법을 찾을 수 있도록 도와 줄 수 있습니까? 감사합니다 :)

Answer 1

당신은 OnChanges 인터페이스를 체크 아웃해야합니다 : https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

당신은 때 입력 변경 어떤 행동을 하위 구성 요소를 구현 한 후 추가해야합니다. 링크 :

@Component({selector: 'first-child', template: `...`}) 
class MyComponent implements OnChanges { 
    @Input() 
    prop: number; 
    ngOnChanges(changes: SimpleChanges) { 
    changes['showList'] . . . 
    // (implement what you want to do with showList) 
    } 
} 

에서

(예