Angular 5中angular-tree-component节点样式及动态生成HTML问题

我来帮你搞定这个问题！Angular自动转义HTML是出于安全考虑，但我们可以通过两种方式实现你要的节点自定义样式/HTML渲染需求：

方法一：利用innerHTML渲染原始HTML #

angular-tree-component支持自定义节点模板，我们可以在模板里用innerHTML来解析节点中的HTML内容，步骤如下：

1. 修改你的组件模板（app.component.html），添加自定义节点模板：

<tree-root #myTree [nodes]="nodes">
  <ng-template #nodeTemplate let-node>
    <!-- 使用innerHTML渲染节点的name属性中的HTML -->
    <span [innerHTML]="node.data.name"></span>
  </ng-template>
</tree-root>

2. 调整组件类中的nodes数据，直接写入原始HTML标签（不用转义）：

nodes = [
  { id: 1, name: 'root1', children: [
    { id: 2, name: '<b>child1</b>' }, // 这里直接写<b>标签即可
    { id: 3, name: 'child2' }
  ] }
];

这样Angular就会把<b>child1</b>解析成加粗的文本，而不是转义后的<b>child1</b>。

方法二：动态添加CSS类（更安全的方式） #

如果只是需要给特定节点设置样式，推荐用动态类绑定的方式，避免直接渲染HTML带来的XSS风险：

1. 同样在组件模板中自定义节点模板，根据节点数据绑定类：

<tree-root #myTree [nodes]="nodes">
  <ng-template #nodeTemplate let-node>
    <!-- 给id为2的节点添加bold-node类 -->
    <span [class.bold-node]="node.data.id === 2">{{ node.data.name }}</span>
  </ng-template>
</tree-root>

2. 在app.component.css中定义对应的样式：

.bold-node {
  font-weight: bold;
  /* 还可以添加其他样式，比如颜色、字体大小等 */
}

注意事项 #

• 使用innerHTML时，一定要确保节点内容是可信的，避免用户输入的恶意HTML被执行；
• 如果需要更复杂的节点结构，还可以在自定义模板里添加更多元素或逻辑，完全控制节点的渲染效果。

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