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

Posted 2023-02-23

【中文标题】如何在 ng2-tag-input 中使用自定义样式组件作为标签背景颜色？

【英文标题】：How to use Custom style component for tags background color in ng2-tag-input?

【发布时间】：2017-06-17 07:07:15

【问题描述】：

如何在 ng2-tag-input 插件中为标签添加背景颜色，我搜索了它，他们说我们需要使用自定义组件的样式，我添加但找不到触发器，我正在使用这个 @987654321 @ website.任何人都可以帮助我吗？

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);

【参考方案1】：

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

你需要在你想要修改样式的组件中找到对应的css类。

例子：

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

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