如何删除 Angular2 组件的样式？答案

【问题标题】：How to remove styles of an Angular2 component?如何删除 Angular2 组件的样式？
【发布时间】：2017-05-19 17:05:55
【问题描述】：

我目前正在使用 ng2-smart-table。这个组件其实是有自己的风格的：

[...]
selector: 'ng2-smart-table',
styles: [":host /deep/ *{box-sizing:border-box;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif}:host /deep/ button,:host /deep/ input,:host /deep/ optgroup,:host /deep/ select,:host /deep/ textarea{color:inherit;font:inherit;margin:0}:host /deep/ table{font-size:16px;line-height:1.5;color:#606c71;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all}:host /deep/ table tr th{font-weight:700}:host /deep/ table tr section{font-size:.75rem;font-weight:700}:host /deep/ table tr td,:host /deep/ table tr th{font-size:.875rem;margin:0;padding:.5rem 1rem;border:1px solid #e9ebec}:host /deep/ a{color:#1e6bb8;text-decoration:none}:host /deep/ a:hover{text-decoration:underline} /*# sourceMappingURL=ng2-smart-table.component.css.map */ "],
        template: "<table [id]=\"grid.getSetting('attr.id')\" [ngClass]=\"grid.getSetting('attr.class')\"><thead ng2-st-thead *ngIf=\"!grid.getSetting('hideHeader') || !grid.getSetting('hideSubHeader')\" [grid]=\"grid\" [isAllSelected]=\"isAllSelected\" [source]=\"source\" [createConfirm]=\"createConfirm\" (create)=\"create.emit($event)\" (selectAllRows)=\"onSelectAllRows($event)\" (sort)=\"sort($event)\" (filter)=\"filter($event)\"></thead><tbody ng2-st-tbody [grid]=\"grid\" [source]=\"source\" [deleteConfirm]=\"deleteConfirm\" [editConfirm]=\"editConfirm\" (edit)=\"edit.emit($event)\" (delete)=\"delete.emit($event)\" (userSelectRow)=\"onUserSelectRow($event)\" (editRowSelect)=\"editRowSelect($event)\" (multipleSelectRow)=\"multipleSelectRow($event)\" (rowHover)=\"onRowHover($event)\"></tbody></table><ng2-smart-table-pager *ngIf=\"grid.getSetting('pager.display')\" [source]=\"source\" (changePage)=\"changePage($event)\"></ng2-smart-table-pager>",
[...]

我想知道是否可以在模板中指定我想使用这个没有样式的组件。

比如这样的：

<ng2-smart-table [settings]="settings" [source]="source" (edit)="emitEdit($event)" noStyles></ng2-smart-table>

【问题讨论】：

标签： angular styles ng2-smart-table

【解决方案1】：

我遇到过这样的事情，但相反，我需要自己的风格。

问题是g2-smart-table 是一个库，而不是您所说的代码。

因此，一种解决方案是在 github 中分叉存储库，并在 packages.json 中引用您的分叉存储库而不是原始存储库。

而且，很明显，在分叉的存储库中，您可以删除样式或做任何您想做的事情。

您可以在这里找到如何使用您的package.json 中的分叉存储库：

https://coderwall.com/p/q_gh-w/fork-and-patch-npm-moduels-hosted-on-github

选项 2：

这对社区来说会很好。

仍然 fork 原始存储库，创建一个指令 [noStyles] 从库的模板中删除样式并发出拉取请求。

这样，如果它被接受，每个使用这个库的人都可以使用你的 [noStyles] 指令并从中受益。

【讨论】：

我选择了选项 2。感谢您的回答。

【解决方案2】：

您可以尝试清除所有应用的类。 Check the approved answer 这应该可以解决问题。 从粘贴的答案编辑代码

var ancestor = document.getElementById('id'),
//put an id to ng2-smart-table or something to catch this element
descendents = ancestor.getElementsByTagName('*');
// gets all descendent of ancestor
var i, e, d;
for (i = 0; i < descendents.length; ++i) {
   e = descendents[i];
   e.removeAttribute('style');
   e.removeAttribute('class');
}

【讨论】：