typescript - Angular 2 - 指令如何向主机提供数据？

Question

我有一个我认为应该在 Angular 2 中解决的非常简单的问题，但我就是找不到正确的语法。

我的目标是执行以下操作的指令:

1. 接受任意数据作为值。例如，[my-data]="[1,2,3,4,5]"
2. 处理这个变化。例如。 onChange() { 返回 this.data.length = 55; 。
3. 将此数据发送到主机，并绑定(bind)到主机属性。

我在 1) 上还不错，但在 2) 和 3) 上有点迷茫。到目前为止，我有类似的东西:

@Directive({
  selector: ['ap-data'],
  host: {
    '(change)': 'onChange()'
  }
})
export class DataDirective {

  @Input('ap-data') data: any;

  @HostBinding('attr.ap-data') get dataSet() {
    return processData(this.data);
  }

  ...

}

@Component({
  selector: 'myComponent',
  directive: [DataDirective],
  template: `
   <div [ap-data]="[1,2,3,4,5]"></div>
  `
})
export class MyComponent {

  public data: any[];

  public dataSet: ProcessedDataType;

  ...

}

Answer 1

对于主机绑定(bind)的指令，使用 EventEmitter:

@Output('ap-data-change') apDataChange: EventEmitter = new EventEmitter() 

onChange() {
  ... 
  this.apDataChange.next(someValue);
} 

<div [ap-data]="[1,2,3,4,5]" (ap-data-change)=hostField=event$></div>