聆听组件角度 2 中的模型

Question

我正在使用 Angular 2。我有一个场景，我有一个组件、接口和指令。

该指令用于自动建议，我的界面用作模型。

因此，每当用户选择一个值时，我都会更新模型，并且有一种方法可以让我的组件监听模型的变化。

directive - model - component interaction

组件将如何监听我通过指令进行的模型更改？还可以使用模型来保存数据吗？

Answer 1

使用输入、输出和绑定，例如：

（不是真正的自动完成，但它应该让你开始）

@Component({
  selector: 'auto-complete',
  template: `
  <select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)">
    <option *ngFor="#val of values" [value]="val">{{val}}</option>
  </select>`})
export class AutoCompleteComponent {
  @Input() values:string[];
  @Output() valueChange:EventEmitter<string> = new EventEmitter<string>();
  value:string;
}

@Component({
  selector: 'parent',
  directives: [AutoCompleteComponent],
  template: `
<auto-complete [value]="options" (valueChange)="onUpdate($event)"></auto-complete>
`})
export class AppComponent {
  options = ['a', 'b', 'c', 'd', 'e'];
  onUpdate(event) {
    console.log(event);
  }
}