如何在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