来自Victor Savkin在Angular2 template syntax上的帖子,展示了如何使用输入和输出属性绑定 -
<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属性用@Input()修饰,而output属性有@Output()。 我应该如何声明一个具有双向属性绑定的属性? 示例:假设rootpanel组件具有'suggestions'属性(类型为string),searchPanel具有'getSuggestions属性。现在我想要两个属性彼此绑定。 我试过了 -
rootpanel.html:
<search-panel [(getSuggestions)]="suggestions"> </search-panel>
但是我在searchPanel组件中声明getSuggestions属性时遇到困难。
此外,getSuggestions属性的类型应该是什么 - string or EventEmitter<string>
?
请建议。
答案 0 :(得分:3)
如果您想要从父组件进行双向模型绑定:
[(model)]
您的子组件中需要以下内容:
@Input() model: string;
@Output() modelChange:EventEmitter<string>;
在您的子组件中覆盖模型的某个时刻,您将发出modelChange
事件:
updateModel(newValue:string) {
this.model = newValue;
this.modelChange.emit(this.model);
}
从父组件的角度来看,[(model)]
相当于:
[model]="model" (modelChange)="model=$event"
通过这种方式,当模型属性在子组件内部发生更改时,模型中的更改会通过双向绑定向上传播,同时会同步所有绑定模型。
答案 1 :(得分:2)
如果你想使用[(getSuggestions)]
- 样式进行双向绑定,则声明像
class TodoCmp {
@Input() getSuggestions;
@Output() getSuggestionsChange = new EventEmitter();
onClick() {
getSuggestions = 'someValue';
getSuggestionsChange.emit(getSuggestions);
}
}
对于这样的输入/输出组合, getSuggestions
可能不是一个好的选择,但它应该演示它们是如何连接的。输出需要与输入同名,并附加Change
。
如果这个命名方案不适合使用您的组件,如
<search-panel [suggestions]="suggestions" (getSuggestions)="updateSuggestions($event)> </search-panel>
输入/输出如
class TodoCmp {
@Input() suggestions;
@Output() getSuggestions = new EventEmitter();
onClick() {
suggestions = 'someValue';
getSuggestions.emit(getSuggestions);
}
}
答案 2 :(得分:0)
推荐的方法pixelbits正是您应该如何做,但是,如果您在一个组件上具有多个双向数据绑定属性,或者甚至在您的代码库中经常更改一个双向数据绑定属性,我都会为此创建一个装饰器。 如果您使用的是npm here,则使用npm。 如果需要代码,只需转到gihub页面。
有了这个,您可以直接使用:
import { Component } from '@angular/core';
import { TwoWay } from 'two-way-decorator';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
@TwoWay()
public text: string;
@TwoWay()
public count: number;
}