OnChanges

Question

我正在尝试在我的两个组件之间实现自定义双向绑定。

我确实读过有关命名惯例的说法，说明你必须定义@Input()喜欢＆＃34; test＆＃34;然后定义@Output()名为＆＃34; testChange＆＃34;。

我无法找到关于这是否仍然是最新的任何内容，我无法让我的约束力发挥作用。

parentComponent中的一些代码：

<my-comp [(userGroupIds)]="userGroups"></my-comp>

MyComponent（child）：

export class MyComponent implements OnInit, OnDestroy{
  @Input() userGroupIds: number[];
  @Output() userGroupIdsChange = new EventEmitter<number[]>();

  updateValues(){
    //here I am iterating through the rows of a table within my component
    this.userGroupIds = this.tableRows.map(item => {return item['id']});
    this.userGroupdIdsChange.emit(this.userGroupIds);
  }
}

parentComponent：

export class parentComponent implements OnInit, OnChanges, OnDestry{
  userGroups: number[];
  constructor(){
    this.userGroups = [];
  }

  ngOnChanges(changes: SimpleChanges){
    if(changes['userGroups']){
      // this is never show, ngOnChanges doesn't get fired;
      console.log(this.userGroups);
    }
  }
}

我有什么遗失的吗？ Angular团队有什么改变吗？

Afaik绑定有点像

[userGroupsIds]="userGroups" (userGroupsIdsChange)="userGroupIds=$event"

所以我尝试自己设置，但也没有更新。只有工作才能将函数传递给eventEmitter。

Answer 1

您的绑定就像魅力一样，它不会触发ngOnchanges方法，这是预期的行为。

来自Angular docs：

OnChanges

当指令的任何数据绑定属性发生更改时调用的生命周期钩子。

由于userGroups不是@Input()，因此它不能成为数据绑定属性＆＃34; ，它在内部更改的值不会运行ngOnChanges挂钩。

Angular 4 - 自定义双向绑定

1 个答案:

OnChanges