用于 2 路属性绑定(bind)的 Angular2 装饰器

Question

来自 Victor Savkin 在 Angular2 template syntax 上的帖子，展示如何使用输入和输出属性绑定(bind) -

<todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>

@Component({selector: 'todo-cmp'})
class TodoCmp {
  @Input() model;
  @Output() complete = new EventEmitter(); // TypeScript supports initializing fields
}

输入属性用@Input()修饰，而输出属性用@Output()修饰。我应该如何声明一个具有 2 路属性绑定(bind)的属性？示例:假设 rootpanel 组件具有“suggestions”属性(字符串类型)，并且 searchPanel 具有“getSuggestions”属性。现在我希望这两个属性以双向方式相互绑定(bind)。我试过了 -

rootpanel.html:

<search-panel [(getSuggestions)]="suggestions"> </search-panel>

但是我在 searchPanel 组件中声明 getSuggestions 属性时陷入困境。getSuggestions 属性的类型也应该是什么 - string or EventEmitter<string> ？

请提出建议。

Answer 1

如果您希望从父组件进行双向模型绑定(bind):

[(model)]

您的子组件中需要以下内容:

@Input() model: string;
@Output() modelChange:EventEmitter<string>;

当模型在子组件中被覆盖时，您将发出 modelChange 事件:

updateModel(newValue:string) {
    this.model = newValue;
    this.modelChange.emit(this.model);
}

从父组件的 Angular 来看，[(model)]相当于:

[model]="model"  (modelChange)="model=$event"

这样，当子组件内的模型属性发生更改时，模型中的更改会通过双向绑定(bind)向上传播，从而同步所有绑定(bind)的模型。