ngx-chips(ng2)标签输入组件自定义主题不起作用 [英] ngx-chips (ng2) tag input component custom theme not working

问题描述

我还没有找到另一个已经回答的问题.我已经看过它的描述页面，并按照那里的指令进行操作.

I have not foiund another question that has been answered already. I have looked at the description page of this already and followed the directives there.

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

So in my Scss folder where I actually define custom bootstrap I created a new tag-input theme and imported its core style in it

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

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

我也将主题名称添加到这样的组件中.

I also add my theme name in the component like this.

    @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文件

This is my scss file altogether

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

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

Here is also my custom bootstrap set up

@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中，因此我确信无论如何我都不应该在那里做任何事情，因为它总是会被覆盖.

Ok I get the new ark-tag-theme class at the initial div of the component but everything else still reads the setup bootstrap3 and none of my classes are read for tags. I also used /deep/ instead of ng-deep but same result. Since input component is in node_modules I am sure I should not do anything there anyway because it is always overwritten.

WI在Firefox中也尝试过，因为我听到关于chrome不尊重ng-deep的事情.那我怎样才能让我的班级阅读输入标签呢?

WI tried in firefox also as I heard things about chrome not respecting ng-deep. SO how can I get my classes read for input tags?

推荐答案

好，我做到了，我的错误不是从组件中引用 scss 文件并将其作为引导Sass链并使用应用程序cli加载它.因此，我从引导程序中获取了 ark-theme.scss 文件.将其放在标签输入组件所在的公共组件文件夹中.并像在组件封装中的所有css文件一样，从组件内部加载它.

Ok, I managed to do this, my mistake was not referring to the scss file from the component and putting it as part of bootstrap sass chain and load it with the app cli. So I took ark-theme.scss file from bootstrap. Put it inside the common component folder the tag input component is. And loading it from inside the component just as any css file for the component encapsulation.

我不仅要导入ngx-chips内核，还要再次导入函数和自定义变量，或自举变量文件.

I am also importing not just ngx-chips core but once again the function and custom variables, or bootstrap variables file too.

@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 文件.

And that's it. no need to increase specificity. This way I can use my own variables and functions while defining the theme. Plus I have a copy of this component for email add/remove functionality, so I can actually reuse the scss file.

这篇关于ngx-chips(ng2)标签输入组件自定义主题不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！