角度4模板绑定与ES6模板字符串 [英] Angular 4 Template Binding with ES6 Template String

问题描述

 < 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模板字符串？

解决方案

如果可以的话这将是很棒的。同时，我认为类似优雅的解决方案是在组件类中定义一个样式对象，然后绑定到模板中的ngStyle。

  / * my.component.ts * / 
导出类MyComponent实现OnInit {
 myStyle：Object; 
 
 ngOnInit（）{
 myStyle = {'transform'：`translate3d（$ {gridTranslateX} px，0，0）`}; 
} 
} 
  

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

Something I could do in Vue, but doesn't appear to work in Angular 4:

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

It seems I have to go back to doing it the old Angular 1.x way:

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

Is there a way to use ES6 template strings in an Angular 4 html template?

解决方案

It would be great if this were possible. In the meanwhile, I think a similarly elegant solution would be to have a style object defined in the component class and that is then bound to ngStyle in the template.

/* 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>

这篇关于角度4模板绑定与ES6模板字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！