Question

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

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

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

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

@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类，但是其他所有内容仍然会读取安装bootstrap3，并且我的类都没有读取标签。我也使用/ deep /而不是ng-deep但结果相同。由于输入组件在node_modules中，我确信我不应该做任何事情，因为它总是被覆盖。

WI也尝试使用Firefox，因为我听说有关chrome不尊重ng-deep的事情。那么如何才能读取输入标签的类？

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链的一部分并通过应用程序cli加载。因此，我从引导程序中获取了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文件。

ngx-chips（ng2）标记输入组件自定义主题不起作用

2 个答案: