0

如何在 ng2-tag-input 插件中为标签添加背景颜色，我搜索了它，他们说我们需要使用自定义组件的样式，我添加但找不到触发器，我正在使用这个https://github .com/Gbuomprisco/ng2-tag-input 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);
4

1 回答 1

1

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

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

例子：

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

在这里查看 tag-input 的 scss并以 parent 的样式创建相应的类。

于 2017-01-31T19:02:14.787 回答