Question

我正在Angular 7组件的.css文件中使用CSS content属性 content: attr(myValue);

&::before {
    content: attr(myValue);
    position: absolute;
    left: 2em;
    font-weight: bold;
    top: 1em;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: .785rem;
}

按如下方式连接到组件的.html文件中的字符串值：

      <div class="timeline-item" myValue='Can I use an interpolated value here instead?'>
        ...
      </div>

我想在.html的myValue中插入一个插值的字符串值。我尝试了官方Angular template syntax guide中概述的各种绑定技术，但没有成功。

是否可以在myValue中插入插值？换句话说，我可以做到这一点吗？

      <div class="timeline-item" myValue='{{myInterpolatedString}}'>
        ...
      </div>

Answer 1

您无法将div上的myValue之类的未知属性绑定到值，运行时给您一个错误

Error: Template parse errors:
Can't bind to 'myValue' since it isn't a known property of 'div'. ("
<div class="timeline-item" [ERROR ->]myValue="{{'something'}}">
"): ng:///AppModule/AppComponent.html@4:31

您必须改用attr.myValue。可以使用单引号'以及双引号"。

attr.myValue="{{myBoundValue}}"
attr.myValue='{{myBoundValue}}'

您可以使用此语法省略花括号

[attr.myValue]="myBoundValue"

在CSS content属性中使用角插值字符串

1 个答案: