Question

我有一个关于数据绑定的问题。在我的项目中，我有父母和两个孩子父：

    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);

            }
        }

    '

和第二个孩子：

/*component ect*/

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

现在问题。我想，当我点击第一个孩子的按钮来添加或删除数组中的项目和编辑的数组（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)
  }
}

传递数据onChange从父级到子级

1 个答案: