如何使用Typescript和Angular 2中的「@input set」檢索數據？

Question

我處理遺留代碼：

@Input() set ratio (ratio: { w: number, h: number }) { this._ratio = ratio || null; } 
... 
console.log(this._ratio.h); 

我的問題是我應該放在HTML是能夠讀取VAR這樣呢？我試過不同的東西，如

ratio="30,30" 
ratio="{w:30,h:30}" 
[ratio]="..." 

等，我不能讓它正確設置該變種。

Answer 1

您還需要一個get的比例，否則，您的第二個版本是正確的。

下面是一個例子

@Component({ 
    selector: 'ratio-display', 
    template: '<span>{{ratio.w/ratio.h}}</span>' 
}) 
export class RatioDisplay { 
    ratio_ = {w: 1, h: 1}; 

    @Input() set ratio (ratio: {w: number, h: number}) { 
    if(ratio) { 
     this.ratio_ = ratio; 
    } 
    } 
    get ratio() { 
    return this.ratio_; 
    } 
} 

@Component({ 
    selector: 'app', 
    template: ` 
    <div> 
     <ratio-display [ratio]="ratio"></ratio-display> 
    </div> 
    `, 
}) 
export class App { 
    ratio = {w: 30, h: 45}; 
} 

工作Plnkr可以在這裏找到：https://plnkr.co/edit/4TuMEzfDB6hxyGbC6csQ?p=preview

當然，唯一的原因，你需要一個二傳手在這種情況下，如果要謹防被傳遞無效的成分，如果你只是想要一個簡單的值綁定到，你可以使用

@Component({ 
    selector: 'ratio-display', 
    template: '<span>{{ratio.w/ratio.h}}</span>' 
}) 
export class RatioDisplay { 
    @Input() ratio = {w: 1, h: 1}; 
} 

文字也可以直接從傳遞的對象您的模板

<ratio-display [ratio]="{w: 30, h: 45}"></ratio-display> 

https://plnkr.co/edit/4TuMEzfDB6hxyGbC6csQ?p=preview