组件和同一元素上的指令之间的双向数据绑定？
组件和同一元素上的指令之间的双向数据绑定？
提问于 2016-10-05 19:46:33
<tab mousePosCollector></tab>MousePosCollectorDirective和TabComponent都有一个属性x。当属性x在TabComponent中更改时，如何在MousePosCollectorDirective中更新属性x？
标准的双向数据绑定似乎不是我的情况下的解决方案。
<tab mousePosCollector [(x)]="x"></tab>这将在MousePosCollectorDirective和TabComponent的父组件之间启动双向数据绑定，而不是TabComponent本身，这正是我想要的。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-05 20:03:15
我想双向绑定应该适用于普朗克。
指令
@Directive({
selector: '[mousePosCollector]'
})
export class MousePosCollectorDirective {
@Input() x;
@Output() xChange = new EventEmitter();
ngOnInit() {
setTimeout(() => {
this.x = ++this.x;
this.xChange.emit(this.x);
}, 1000)
}
ngOnChanges() {
console.info(`Changes from MousePosCollectorDirective: ${this.x}`);
}
}组件
@Component({
selector: 'tab',
template: `<h3>tab {{x}}</h3>`
})
export class TabComponent {
@Input() x;
@Output() xChange = new EventEmitter();
ngOnInit() {
setTimeout(() => {
this.x = ++this.x;
this.xChange.emit(this.x);
}, 2000)
}
ngOnChanges() {
console.info(`Changes from TabComponent: ${this.x}`);
}
} 父组件
@Component({
selector: 'my-app',
template: `
<tab mousePosCollector [(x)]="x"></tab>
{{x}}`
})
export class AppComponent {
x = 1;
ngOnInit() {
setTimeout(() => {
this.x = ++this.x;
}, 3000)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39882443
复制相关文章
相似问题
腾讯云开发者
