雙向數據綁定與Angular2

Question

有人知道我在這裏做錯了嗎？我無法使用[（ngModel）]語法使Angular2 2-way數據綁定工作。這裏是我的組件：

import { Component } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
declare let window; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    progress: number; 

    constructor(public _sharedService: SharedService) { 
    window.addEventListener('progress.update', function() { # ANSWER: Change function() { to() => { 
     this.progress = window.sharedService.progress; 
     console.log(this.progress); # this outputs numbers 
    }); 
    } 
} 

這是我的HTML：

<ion-range [(ngModel)]="progress" min="0" max="100" name="progress"> 
     <ion-icon range-left small name="sunny"></ion-icon> 
     <ion-icon range-right name="sunny"></ion-icon> 
     </ion-range> 

不應該改變內部組件的this.progress值反映的觀點，因爲我使用的是[（ngModel）] ？

Answer 1

對於雙向綁定，你需要一個@Input()，並和@Output()其中名字而@Output()的名字有一個額外的Change後綴相匹配。

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    @Input() 
    progress: number; 

    @Output() 
    progressChange:EventEmitter<number> = new EventEmitter<number>(); 

    constructor(public _sharedService: SharedService) { 
    window.addEventListener('progress.update',() => { // <<<=== use arrow function for `this.` to work 
     this.progress = window.sharedService.progress; 
     this.progressChange.emit(this.progress); 
     console.log(this.progress); # this outputs numbers 
    }); 
    } 
} 

事件處理程序，你也可以使用

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    @Input() 
    progress: number; 

    @Output() 
    progressChange:EventEmitter<number> = new EventEmitter<number>(); 

    constructor(public _sharedService: SharedService) {} 

    @HostListener('window:progress.update') 
    onProgressUpdate() { 
    this.progress = window.sharedService.progress; 
    this.progressChange.emit(this.progress); 
    console.log(this.progress); # this outputs numbers 
    } 
}