如何在ng2-tag-input中使用标签背景颜色的自定义样式组件？

Question

我怎么才能给ng2-tag-input插件中的标签添加背景色，我搜索了一下，他们说我们需要使用自定义组件来设置样式，我添加了，但是找不到触发器，我正在使用这个https://github.com/Gbuomprisco/ng2-tag-input website.can，有谁帮我一下吗？

video.component.ts文件

import { Component, forwardRef } from '@angular/core';
import { TagInputComponent } from 'ng2-tag-input';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
     selector: 'custom-tag-input', 
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => videoComponent ),
        multi: true
    }],
    template:`<tag-input [ngModel]="['Typescript', 'Angular 2']"></tag-input>`,
    styleUrls: [],
     animations: [
        trigger('flyInOut', [
            state('in', style({transform: 'translateX(0)'})),
            transition(':enter', [
                animate(200, keyframes([
                    style({opacity: 0, offset: 0}),
                    style({opacity: 0.5, offset: 0.3}),
                    style({opacity: 1, offset: 1.0})
                ]))
            ]),
            transition(':leave', [
                animate(150, keyframes([
                    style({opacity: 1, transform: 'translateX(0)', offset: 0}),
                    style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
                    style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
                ]))
            ])
        ])
    ]

})
export class videoComponent extends TagInputComponent{

     constructor(){ }

      public options = {
         readonly: undefined,
        placeholder: 'Add a tag'
    };

    public onAdd(item) {
        console.log(item + ' added');
    }

    public onRemove(item) {
        console.log(item + ' removed');
    }

    public onSelect(item) {
        console.log(item + ' selected');
    }

    public onFocus(item) {
        console.log('input focused: current value is ' + item);
    }

    public onBlur(item) {
        console.log('input blurred: current value is ' + item);
    }

    public transform(item: string): string {
        return `@${item}`;
    }

    private startsWithAt(control: FormControl) {
        if (control.value.charAt(0) !== '@') {
            return {
                'startsWithAt@': true
            };
        }
        return null;
    }
    private endsWith$(control: FormControl) {
        if (control.value.charAt(control.value.length - 1) !== '$') {
            return {
                'endsWith$': true
            };
        }
        return null;
    }
    public validators = [this.startsWithAt, this.endsWith$];
    public errorMessages = {
        'startsWithAt@': 'Your items need to start with "@"',
        'endsWith$': 'Your items need to end with "$"'
    };


}

app.module.ts文件

import { TagInputModule } from 'ng2-tag-input';
import { videoComponent } from './videos/video.component'; 


@NgModule({
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,

        TagInputModule, 
    ],
    declarations: [ Home, videoComponent ], // we need this here
    bootstrap: [ Home ], // this is just an example
    entryComponents: [ Home ] // this is just an example
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

您需要使用父组件的样式来覆盖tag-input组件的样式。您需要使用/deep/关键字，该关键字将告诉Angular使子对象继承指定的CSS部分。有时，您可能需要使用!important关键字来确保值将被覆盖。

您需要在要修改其样式的组件中找到相应的css类。

示例：

/deep/ .example-style-which-can-be-used-by-children {
    background-color: red !important;
}

查看标签输入here的scss，并在parent样式中创建相应的类。