Question

Angular 2 rc3

我正在尝试动态添加calc()到模板中的元素。我有类似的东西。

template : `<div attr.style.width="{{width}}></div>"`

export myClass
{
    @Input() myInputObject:any;
    private width:string;


   ngOnInit() { this.setWidth()}

   private setWidth()
   {
       let percent = myInputObject.percent;
       this.width =  'calc(' + percent + '% - 20px)';
   }
}

如果我使用括号，那么在DOM中输出就像这样。

<div style="unsafe"></div>

如果我取出括号，它就可以了（有点）看起来像这样。

<div style="calc10% - 20px"></div>

这也行不通。

<div attr.style.width="calc({{width}} - 20px)">

非常感谢有关如何将calc()添加到模板的任何帮助。注意我还尝试用(和)替换括号。这又回来了“不安全”。

示例：（rc1）

我在我的环境中使用rc3。但我能够在plunker中重现RC1的相同问题。我假设这是一个安全的事情。但必须有一种方法可以将calc()添加到样式属性中。也许还有比这更好的方法？

https://plnkr.co/edit/hmx5dL72teOyBWCOL0Jm?p=preview

Answer 1

计算的样式应清理。

以下是您的解决方案：

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  selector: 'my-app'
  template: `
    <div [style.width]="width">
      <h2>Hello {{name}}</h2>
    </div>
  `
})
export class App {

  private width:string;

  constructor(sanitizer: DomSanitizationService) {
    this.name = 'World'
    this.width = sanitizer.bypassSecurityTrustStyle("calc(10% - 20px)");
  }
}

Answer 2

您也可以尝试使用ngStyle代替：

[ngStyle]="{'width': 'calc(' + percent + '% - 20px)'"}

然后将“百分比”值绑定到输入值。

Angular 2，将calc（）添加为内联样式。使用括号进行不安全插值

2 个答案: