Angular 如何在DataTable按钮上放置图标？-有棱角的

我正在使用and，我想在表中创建一个按钮，但我想用and放置一个图标，而不是文本。我有以下代码：

this.dtOptions={
//...
按钮：[
//...
{
扩展：“pdf”，
文本：“”
}
]           
};

---

我知道我不会以这种方式加载图标的组件，但是有没有一种不必使用css的方法呢？

我认为唯一的选择是使用html。说明您可以在按钮配置的

text

属性中使用html。例如，您可以使用如下内容：

---

如果要使用角度组件而不是原始html，则必须在隐藏容器中的某个位置预渲染角度组件（即使用组件工厂动态创建

fa图标

组件），然后手动将渲染的html复制到按钮配置。这是一个复杂得多的过程，几乎没有什么好处

• 新的角度元素可能会使其稍微简单一些

---

只要已加载，就可以操作

className

属性。我建议您也通过

dom

属性重置默认按钮布局设置。正如其他人指出的，不要将angular（+2）指令与代码的这一部分混合使用。这可能不起作用（我喜欢安格拉尔，但这是同一笔交易），而且真的没有必要。以下是一个例子：

按钮：{
//重置类并更改呈现的标记
//从到
dom:{
按钮：{
标签：“我”，
类名：“”
}
},
//因为我们现在有完全没有样式的图标添加
//通过.custom btn类在它们之间留出一些空间
按钮：[
{
标题：下载为PDF格式，
扩展：“pdfHtml5”，
类名：“自定义btn fa-file-pdf-o”，
文本：“”
},
{
titleAttr:“作为Excel下载”，
扩展：“excelHtml5”，
类名：“自定义btn fa-file-excel-o”，
文本：“”
},
{
titleAttr:'下载为CSV'，
扩展：“csvHtml5”，
类名：“自定义btn fa-file-text-o”，
文本：“”
},
{
标题：“打印”，
扩展：“打印”，
类名：“自定义btn fa打印”，
文本：“”
}
]
}    

。自定义btn{
光标：指针；
右边距：5px；
}

---

我手头没有使用DT和Angular2的工作plunkr，但如果您需要，可以生成Angular1示例。尽管是同一笔交易，但没有区别

作为一个简单的解决方案，您可以将所有需要的图标添加到一个隐藏的

div

中，并为每个图标指定一个

id

，以便呈现它们的

svg

元素，您可以为相关按钮文本指定一个图标

此外，您还可以在呈现表后删除此临时dev和图标，以清理HTML

$('#example').on('init.dt', function () {
  $("#icons").remove();
});

---

你想把这个按钮放在表格的每一行吗？不，那些按钮会放在表格的上方，这些按钮是DataTable的扩展你想不需要使用css或者什么来做吗？你能解释一下确切的问题吗？我想这样不行。Angular在datatables调用innerHtml类似操作后不会呈现fa图标组件。@TarunLalwani我想使用预编译图标，并通过TypeScript将其上载到网页的某个部分。响应非常好，但这不是我想要的。我知道有一种方法可以预编译组件，但我不知道它是如何工作的。@SamirLlorente，好的！如前所述，我只对angularjs有深入了解，例如，如果需要向行或列注入指令，可以使用

$compile

，但即使在angularjs中，也无法编译按钮库的内容。不过，它是一个纯粹的老式jQuery库，按钮插件是该库的一个扩展，它可以在幕后完成大多数事情。恐怕不能将指令与按钮一起使用。您将如何操作？请参阅和

buttons: [{
  text: $("#faCoffee").html()
}, {
  text: $("#faPrint").html()
}, {
  text: $("#faUser").html()
}, {
  text: $("#faDownload").html()
}]

$('#example').on('init.dt', function () {
  $("#icons").remove();
});