同じ要素のディレクティブとコンポーネント間の双方向データバインディングですか？

Question

<tab mousePosCollector></tab> 

MousePosCollectorDirectiveおよびTabComponentはいずれもプロパティーxです。プロパティxは、TabComponentのxプロパティがMousePosCollectorDirectiveに変更されたときに、どのように更新できますか？

標準の双方向データバインディングは私の場合の解決策ではないようです。

<tab mousePosCollector [(x)]="x"></tab> 

これはMousePosCollectorDirectiveと、私が欲しいものではありませんTabComponentTabComponentの親コンポーネント、自身との結合双方向のデータを開始します。

ありがとうございます！

Answer 1

は私が動作するはず結合双方向を推測Plunkr：

ディレクティブ

@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) 
    } 
}