Использовать угловую интерполированную строку в свойстве содержимого CSS

Question

Я использую CSS свойство содержимого content: attr(myValue); в файле .css компонента Angular 7

&::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 компонента, напримерthis:

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

Я хочу вставить интерполированное строковое значение в myValue в .html.Я пробовал различные методы связывания, описанные в официальном руководстве по синтаксису Angular Template , но безуспешно.

Есть ли способ вставить интерполированное значение в myValue?Другими словами, могу ли я сделать эквивалент этого:

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

Answer 1

Невозможно привязать неизвестное свойство, такое как myValue в div, к значению, среда выполнения выдает ошибку

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"