2

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

2 回答 2

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]指令并从中受益。

于 2017-05-19T09:00:48.433 回答
0

您可以尝试清除所有应用的类。检查批准的答案，这应该可以解决问题。 从粘贴的答案编辑代码

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');
}
于 2017-05-19T09:05:55.023 回答