Question

我目前正在使用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>

Answer 1

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

问题是g2-smart-table是一个库，不是你的代码。

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

而且，很明显，在forked存储库中，您可以删除样式或执行任何操作。

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

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

选项2：

这对社区来说会很好。

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

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

Answer 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');
}

如何删除Angular2组件的样式？

2 个答案: