Как использовать компонент пользовательского стиля для цвета фона тегов в ng2-tag-input?

Question

Как добавить цвет фона в теги в плагин ng2-tag-input, я искал его, они сказали, что нам нужно использовать пользовательский компонент для стилей, я добавил, но получение триггера не найдено, я использую этот сайт https://github.com/Gbuomprisco/ng2-tag-input. Может кто-нибудь мне помочь?

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 и создать соответствующие классы в стиле родителей.