收听组件 angular 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);
  }
}

收听组件 angular 2 中的模型

listening to a model in component angular 2

angular

angular2-directives

angular2-changedetection