Angular中单独选中动态插值字符串设置样式的最佳实践

你已经尝试过的用标签包裹插值内容的方式，就是Angular生态下处理这类需求的标准最佳实践，不存在不需要依托宿主元素就能直接选中插值内容的官方方案。

• Angular的{{ }}插值本身不会生成独立DOM节点，它只是把组件属性值替换成宿主元素内的纯文本片段，框架层面没有提供单独选中这类纯文本片段的内置能力。
• 不管是[ngClass]还是[ngStyle]，本质都是绑定在DOM元素上的指令，必须依附实际存在的HTML元素才能生效，不存在绕开元素直接给插值文本加样式绑定的路径。
• 实际使用时优先选<span>这类行内元素包裹目标插值即可，不会打断原有文本流，是性能开销最低、可维护性最高的实现方式，只有当你需要插值内容块级展示时，才需要换成<div>这类块级标签。

注意：不要在<p>这类本身只允许包含行内内容的标签内部嵌套<div>等块级元素，会触发浏览器的HTML自动纠错逻辑，破坏DOM结构。

内容的提问来源于stack exchange，提问作者EstherSoftwareDev