ngx-chips (ng2) 标签输入组件自定义主题不工作

Question

我还没有找到已经回答过的另一个问题。我已经看过这个的描述页面并遵循那里的指令。

所以在我实际定义自定义的 Scss 文件夹中 bootstrap 我创建了一个新的标签输入主题并在其中导入了它的核心样式

@import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";

我也是这样在组件中添加我的主题名称。

    @Component({
selector: 'tags',
moduleId: module.id,
template: `
            <tag-input [(ngModel)]="tags"
                       (onSelect)="onSelectedTag($event)"
                       [theme]="'ark-tag-theme'"
                       [placeholder]="placeHolderKey | translate"
                       [secondaryPlaceholder]="placeHolderKey | translate"
                       [inputClass]="'input-of-tag-area-class'"
                       (onAdd)="onTagAdded($event)"
                       [addOnBlur]='true'
                       [editable]='true'
                       (onRemove)="onTagRemoved($event)"
                       (onTagEdited)="onTagEdited($event)"
                       [focusFirstElement]="true"
                       [trimTags]="true"
                       [errorMessages]="errorMessages"
                       [validators]="validators"
                       [separatorKeyCodes]="[32,188]"
                       [ngModelOptions]="{ standalone: false }" #input>
            </tag-input>
        `
    })

这就是我的 scss 文件

    @import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";

    $ark-theme:(

    background-color: theme-color("secondary")
    );

    $ark-tag-theme: (
    background: theme-color("secondary"),
    background-focused: theme-color("secondary"),
    background-active: theme-color("secondary"),
    background-hover: theme-color("secondary"),
    color: #fff,
    color-hover: #fff,
    border-radius: 2px
    );

    ::ng-deep .ng2-tag-input.ark-tag-theme{
     @include tag-theme($ark-theme);
    }

    ::ng-deep .ng2-tag-input.ark-tag-theme tag{
     @include tag-theme($ark-tag-theme);
    }

这也是我的自定义 bootstrap 设置

@import '../../../../node_modules/angular2-toaster/toaster';
// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/functions";

@import "variables-ark";
@import "../../../../node_modules/bootstrap/scss/bootstrap";

// Reset and dependencies

@import "glyphicons";
@import "ark-tag-theme";
@import "app";
@import "theme";

好的，我在组件的初始 div 处获得了新的 ark-tag-theme class，但其他所有内容仍然读取设置 bootstrap3 和 none我的 classes 被读取为标签。我也使用 /deep/ 而不是 ng-deep 但结果相同。由于输入组件在 node_modules 中，我确定无论如何我都不应该在那里做任何事情，因为它总是被覆盖。

WI 也在 firefox 中尝试过，因为我听说 chrome 不尊重 ng-deep。那么如何让我的 classes 读取输入标签？

Answer 1

由于 Angular 加载组件的一些不明原因，默认主题的样式覆盖了自定义主题样式（例如，.ng2-tag-input[_ngcontent-c1] 胜过 .ng2-tag-input.ark-theme）。

使其工作的最简单方法是将所有自定义主题代码定位在组件的本地样式中。

作为解决方法，图书馆消费者可以通过这种方式使他们的主题 CSS 稍微具体一些：

tag-input .ng2-tag-input.ark-theme

这将比内置组件规则更具体并且应该有效。

Answer 2

好的，我设法做到了，我的错误是没有从组件中引用 scss 文件并将其作为 bootstrap sass 链的一部分并加载它应用程序客户端。所以我从 bootstrap 中获取了 ark-theme.scss 文件。将其放在标签输入组件所在的公共组件文件夹中。并从组件内部加载它，就像组件封装的任何 css 文件一样。

我不仅要导入 ngx-chips 核心，还要再次导入函数和自定义变量，或者 bootstrap 变量文件。

@import "~ngx-chips/dist/modules/core/styles/core/core";
@import "~bootstrap/scss/functions";
@import "~assets/sass/_variables-ark.scss";

$ark-theme:(
    background-color: theme-color("secondary")!important
);

$ark-tag-theme: (
background: theme-color("secondary"),
background-focused: theme-color("secondary"),
background-active: theme-color("secondary"),
background-hover: theme-color("secondary"),
color: #fff,
color-hover: #fff,
border-radius: 2px
);

:host ::ng-deep .ng2-tag-input.ark-tag-theme{
 @include tag-theme($ark-theme);
}

:host ::ng-deep .ng2-tag-input.ark-tag-theme tag{
 @include tag-theme($ark-tag-theme);
}

就是这样。无需增加特异性。这样我就可以在定义主题时使用自己的变量和函数。另外，我有一个用于电子邮件 add/remove 功能的此组件的副本，因此我实际上可以重复使用 scss 文件。

ngx-chips (ng2) 标签输入组件自定义主题不工作

ngx-chips (ng2) tag input component custom theme not working

bootstrap-4

ng2-tag-input

angular