ngx芯片(ng2)标签输入组件自定义主题不起作用

Question

我还没有发现另一个已经得到回答的问题。我已经看过它的描述页面，并遵循了那里的指令。

因此，在我实际定义自定义引导程序的Scss文件夹中，我创建了一个新的标记输入主题，并将其核心样式导入其中

@导入"../../../../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);
    }

下面也是我的自定义引导程序设置

@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- bootstrap3类，但其他所有内容仍然读取设置div，并且我的类中没有一个是读取标记的。我还使用了/deep/，而不是ng-deep，但结果相同。因为输入组件是用node_modules编写的，所以我确信我不应该在那里做任何事情，因为它总是被覆盖。

我在firefox中也尝试过，因为我听说chrome不支持ng-deep。那么，如何让我的类读取输入标记呢？

Answer 1

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

我不仅导入ngx-chips核心，而且再次导入函数和自定义变量，或引导变量文件。

@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);
}

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

Answer 2

由于Angular加载组件的方式中的某种模糊原因，默认主题的样式会覆盖自定义主题样式(例如，.ng2-tag-input[_ngcontent-c1]胜过.ng2-tag-input.ark-theme)。

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

作为一种变通办法，库使用者可以通过以下方式使其主题CSS稍微具体一些：

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

这将比内置组件规则更具体，应该可以工作。