Angular 如何在ng2标签输入中使用标签背景颜色的自定义样式组件？

我如何在ng2标签输入插件中为标签添加背景色，我搜索了它，他们说我们需要使用自定义组件进行样式，我添加了，但找不到触发，我正在使用这个网站。有人能帮我吗

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 "$"'
    };


}

---

您需要使用父组件的样式来覆盖

标记输入

组件的样式。您需要使用

/deep/

关键字，它将告诉Angular使子级继承CSS的指定部分。有时您可能需要使用

！重要信息

关键字以确保值将被覆盖

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

例如：

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

查看标记输入的SCS，并以父样式创建相应的类

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