如何将自定义图标添加到 Angular2 primeng Tree

Posted 2023-02-21

【中文标题】如何将自定义图标添加到 Angular2 primeng Tree

【英文标题】：How to add custom icon to Angular2 primeng Tree

【发布时间】：2016-12-19 22:43:36

【问题描述】：

我在我的应用程序中使用 Primeng p-tree 创建树，我需要向树节点添加自定义图标，如下面的 JSON 数据所示。但是树节点没有显示图标。如果有人有任何想法，请帮我解决这个问题。

“标签”：“图片”， "data": "图片文件夹", "icon": "CustIcon.png", “孩子们”： [ “标签”：“Pic1”，“图标”：“icon1.png”， “标签”：“Pic2”，“图标”：“icon2.png”， “标签”：“Pic3”，“图标”：“icon3.png”]

【参考方案1】：

我使用模板解决了这个问题：

<p-tree [value]="equipmentLibrary" selectionMode="single">
    <template let-node pTemplate type="default">
        <span><img class="tree-icon" src="node.icon" /></span>
    </template>
</p-tree>

【讨论】：

感谢您的回复。如果我实施上述方法，节点显示为 [icon node.label]。但是我需要将图标与节点分开作为 [icon][node.label] 我通过在 json 数据中使用 css 类名和 css 文件中的样式来解决问题，如下所示 .abstract-icon background: url("应用程序/图像/abstract-bo.png");高度：16px；宽度：16px；浮动：初始；