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

采取

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

因此,在我实际定义自定义引导程序的 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 类,但其他所有内容仍然读取 setup bootstrap3 并且我的任何类都没有读取标签。我也使用 /deep/ 而不是 ng-deep 但结果相同。由于输入组件在 node_modules 中,我确信无论如何我都不应该在那里做任何事情,因为它总是被覆盖。

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

采取

好的,我设法做到了,我的错误不是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文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

自定义操作方法在ng2 smarttable中不起作用

ngx-bootstrap和ng2 bootstrap之间的区别?

ngx-chips标签输入下拉列表在iPhone中不显示autosuggest

ngx-chips:无法从autocompleteItems添加第二个标签

在ngx-chips中的Tab和Spacebar事件上动态添加标签

在ng2图表中自定义图例形状

UI-路由器混合:在触发具有NG2组件的NG1状态之前,NG2状态不起作用

Angular 2 Bootstrap(ngx-bootstrap / ng2-bootstrap)下拉菜单不起作用

ngx-chips:无法显示自动完成的项目

Angular 8:ngx-chips 表单验证问题

Angular 2 Material md-chips颜色属性不起作用

ng2 从组件继承并扩展父模板

ngx-bootstrapとng2ブートストラップの違いは?

ViewChild ng2设置的内容在Internet Explorer中不起作用

NativeScript ng2双向绑定在TextField上不起作用

如何在Doughnutchart ng2 chart.js中自定义百分比标签

如何在自定义 Ng2 表单元素中访问 NgFormControl

将自定义组件与Angular2结合使用时,JQueryUI Sortable不起作用

具有旧版ng1组件依赖项的ng2 AsyncRoute

yii2自定义验证不起作用

ngx-chips,当disable属性设置为false时,将显示tag-input-dropdown

角度自定义指令ng-show 2向绑定不起作用

在angular2中<ng-content>上的自定义样式不起作用?

从 ng2-select 移动并像选择一样使用 ngx-bootstrap 的提前输入

角度ngx-mat-select-search自定义组件

我在本机脚本中跨ng2组件管理UI引用

将ng2组件模板设置为变量?

数据绑定ng2组件的模板仅设置为OnInit

ng2 将表单组作为参数发送到组件