Angular中如何将组件属性作为模板变量嵌入模板字符串？

问题详情 #

尝试将组件属性作为模板变量嵌入Angular模板字符串，写法如下：

template: `
    <div fxFlexFill>
        <div
            class="wrapper"
            {{ templateVariable }}
            (dblclick)="reset()"></div>
    </div>
`

其中templateVariable定义为：

templateVariable: string = '#abc'

运行时出现错误：

Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name.

解决方案 #

直接按上述写法无法实现，报错原因是Angular模板解析器会把{{ templateVariable }}识别为属性名称，而DOM属性名不允许以{{开头，触发了合法性检查错误。具体能否实现要根据实际需求调整：

1. 若需求是动态添加模板引用变量（如#abc） #

Angular不支持动态创建模板引用变量，这类变量是编译阶段确定的标识，用于组件类关联DOM元素，无法通过模板字符串嵌入的方式在运行时生成。

替代方案：

• 使用@ViewChildren查询所有目标元素，在组件类中根据条件筛选或操作对应元素；
• 借助ViewContainerRef和动态组件创建API，按需生成带有指定模板引用变量的元素。

2. 若需求是动态添加普通DOM属性/指令字符串 #

如果templateVariable是普通属性字符串（如data-id="123"），不能直接用{{ }}嵌入属性列表，可通过以下方式实现：

方法一：用Renderer2动态添加属性

在组件生命周期钩子中获取目标元素，通过Renderer2添加属性：

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  template: `
    <div fxFlexFill>
        <div #targetEl class="wrapper" (dblclick)="reset()"></div>
    </div>
  `
})
export class YourComponent {
  @ViewChild('targetEl') targetEl!: ElementRef;
  templateVariable: string = 'data-abc="123"';

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    // 拆分属性键值并去除引号
    const [key, value] = this.templateVariable.split('=').map(item => item.replace(/["']/g, ''));
    this.renderer.setAttribute(this.targetEl.nativeElement, key, value);
  }

  reset() { /* 重置逻辑 */ }
}

方法二：动态拼接模板字符串（不推荐）

若需动态生成完整模板，可在组件类中拼接模板字符串后通过ComponentFactoryResolver动态创建组件，但该方式会丢失Angular模板编译的安全性与便捷性，仅适用于特殊场景。

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