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

如果可能的话会很棒。与此同时，我认为同样优雅的解决方案是在组件类中定义样式对象，然后将其绑定到模板中的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>

与ES6模板字符串的Angular 4模板绑定

1 个答案: