首页 文章

如何删除Angular2组件的样式？

提问于
浏览 次
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>
angular styles ng2-smart-table

2 回答

  • 0

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

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

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

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

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

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

    Option 2:

    这对社区来说会很好 .

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

    这样，如果它被接受，那么使用该库的每个人都将能够使用您的 [noStyles] 指令并从中受益 .

    回复于
  • 1

    您可以尝试清除所有应用的类 . Check the approved answer这应该可以解决问题 . Edited code from pasted 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');
}
    回复于

相关问题