Angular 4 模板与 ES6 模板字符串绑定答案

【问题标题】：Angular 4 Template Binding with ES6 Template StringAngular 4 模板与 ES6 模板字符串绑定
【发布时间】：2017-10-03 06:43:58
【问题描述】：

我可以在 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 模板字符串？

【问题讨论】：

我在 2016 年 3 月提交了一个与此类似的问题（用于插值），但它无缘无故地关闭了。您可以在这里查看：github.com/angular/angular/issues/7558 建议将其作为组件中的属性来处理。

标签： html string angular templates ecmascript-6

【解决方案1】：

如果这是可能的，那就太好了。同时，我认为一个同样优雅的解决方案是在组件类中定义一个样式对象，然后将其绑定到模板中的 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>

【讨论】：

很遗憾，在 Vue 中拥有它真是太好了。