html - 带有 ES6 模板字符串的 Angular 4 模板绑定(bind)

Question

我可以在 Vue 中做的事情，但在 Angular 4 中似乎不起作用:

<div class="time-translate" [ngStyle]="{transform: `translate3d(${gridTranslateX}px, 0, 0)`}">

看来我必须回到旧的 Angular 1.x 方式:

<div class="time-translate" [ngStyle]="{transform: 'translate3d(' + gridTranslateX + 'px, 0, 0)'}">

有没有办法在 Angular 4 html 模板中使用 ES6 模板字符串？

Answer 1

如果可以的话就太好了。与此同时，我认为一个同样优雅的解决方案是在组件类中定义一个样式对象，然后将其绑定(bind)到模板中的 ngStyle。

/* my.component.ts */
export class MyComponent implements OnInit {
  myStyle: Object;

  ngOnInit() {
    myStyle = {'transform': `translate3d(${gridTranslateX}px, 0, 0)`};
  }
}

/* my.component.html */
<div class="time-translate" [ngStyle]="myStyle">...</div>