Angular 4 - 自定义双向绑定

Question

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

我确实读过命名约定，说你必须定义一个@Input()类似的“ test”，然后定义一个@Output()命名的“ testChange”。

我找不到任何关于这是否仍然是最新的信息，我无法让我的绑定工作。

parentComponent 中的一些代码：

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

我的组件（子）：

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

父组件：

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-Team 有什么改变吗？

Afaik 绑定执行类似的操作

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

所以我尝试自己设置，但也没有更新。唯一的工作是将函数传递给 eventEmitter。

Answer 1

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

来自Angular 文档：

OnChanges

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

因为userGroups不是@Input()它不能是“数据绑定属性”，它的值在内部改变不会运行ngOnChanges钩子。