0

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

因此，在我实际定义自定义引导程序的 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。那么如何让我的类读取输入标签？

4

2 回答 2

2

由于 Angular 加载组件的方式中的一些模糊原因，默认主题的样式会覆盖自定义主题样式（例如，.ng2-tag-input[_ngcontent-c1]wins over .ng2-tag-input.ark-theme）。

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

作为一种解决方法，图书馆使用者可以通过这种方式使他们的主题 CSS 更加具体：

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

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

于 2018-10-16T14:01:46.367 回答
2

好的，我设法做到了，我的错误是没有scss从组件中引用文件并将其作为引导 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文件。

于 2018-11-30T16:54:44.230 回答