Question

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

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

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

我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

对于主机绑定的指令，请使用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>

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

1 个答案: