Question

我正在使用angular2 / 4的Ng2-Completer插件，但在组件样式方面遇到了麻烦。我想将背景下拉列表更改为“红色”，输入框更改为蓝色。

以下是我的傻瓜： https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview

我尝试包含以下CSS，但它似乎不会影响任何内容：

    .completer-row {
        display: inherit;
        background:blue;
    }

    .completer-selected-row {
        background-color: lightblue;
        color: yellow;
    }

    .completer-row p {
        position: relative;
        top: 50%;
        transform: translateY(50%);
    }

    .completer-dropdown-holder {
        position: absolute;
        background: red;
    }

    .customid {
    background:blue;
    }

我的组件：

    import { Component } from '@angular/core';
    import { CompleterService, CompleterData } from 'ng2-completer';
    import {Observable} from 'rxjs/Observable';
    import 'rxjs/Rx';

    @Component({
      selector: 'my-app',
  styleUrls: [
    './app.component.css'
  ],
      template: `<h1>Search color</h1>
                <ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"></ng2-completer>
                <p>Selected: {{selectedColor}}</p>
                `
    })
    export class AppComponent { 
      protected searchStr: string;
      protected dataService: CompleterData;
      protected selectedColor: string;
      protected searchData = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

      protected onSelected(item: CompleterItem) {
        this.selectedColor = item? item.title: "";
      }
    }

Answer 1

您可以inputClass ng2-completer使用<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>。例如，使用bootstrap：

<?php 
           wp_nav_menu(array(
                    'theme_location' =>'primary',
                    'container' => 'nav',
                    'container_class' => 'navbar-collapse navbar',
                    'menu_class'      => 'nav navbar-nav navbar-right'
                ));
            ?>

Answer 2

您可以像这样设置角度ng2完成符的样式：

::ng-deep .completer-row{

        }

Answer 3

Angular 2具有安全功能，其中CSS仅适用于其受尊重组件的HTML文件。或者css必须进入全局styles.css文件以供全局使用。但是，您可以通过添加hots: >>> .class-name来强制应用CSS，此方法将强制css应用于子组件。有关此主题的更多信息Angular 2: How to style host element of the component? https://alligator.io/angular/styles-between-components-angular/

如何css样式angular2的Ng2-completer插件输入框和下拉颜色？

3 个答案: