typescript - Angular 2 - Hur ger direktivet data till värden?

Jag har vad jag tror borde vara ett ganska enkelt problem att lösa i Angular 2, men jag kan bara inte hitta rätt syntax.

Mitt mål är en direktiv som gör följande:

  1. Accepterar godtycklig data som värde. T.ex., [my-data]="[1,2,3,4,5]"
  2. Bearbetar detta vid förändring. T.ex. onChange() { return this.data.length=55; }.
  3. Skickar denna data till värden och binder till en värdegenskap.

Jag klarar mig med 1), men är lite förvirrad över 2) och 3). Hittills har jag något liknande:

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

  ...

}

Svar #1

För direktiv till värdbindning, använd en 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>

Relaterade artiklar