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

【问题标题】：How to css style angular2's Ng2-completer plugin input box and dropdown color?如何css样式angular2的Ng2-completer插件输入框和下拉颜色？
【发布时间】：2017-11-15 17:06:22
【问题描述】：

我正在使用 angular2/4 的 Ng2-Completer 插件，但在设置组件样式时遇到了问题。我想将背景下拉菜单更改为“红色”，将输入框更改为蓝色。

以下是我的 plunkr： 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: "";
      }
    }

【问题讨论】：

input[type="search"]{ background : blue } 适合我；

标签： css angular

【解决方案1】：

您可以使用ng2-completer 的inputClass 属性。例如使用引导程序：

<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>

【讨论】：

伟大而明确的答案，但为什么要在双引号内加上单引号？在哪里可以找到 ng2-completer 的文档？
@Nofel 括号需要一个表达式，所以在这种情况下我们需要一个字符串，这就是为什么我们在双引号内有单引号。见Angular2 documentation。 ng2-completer 文档可以在here找到。

【解决方案2】：

您可以像这样设置 Angular ng2 完成器的样式：

::ng-deep .completer-row{

        }

【讨论】：

【解决方案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/

【讨论】：

您能否向我展示一个使用 ng2-completer 的示例，我正在尝试使用您所描述的组合将类包装在 :hosts(.classname) 和 /deep/ 中。类名，但这里似乎没有效果。
尝试host: >>> .completer-row { display: inherit; background:blue; }，当我做类似的事情时，这看起来有效。确保尖括号之间没有空格。如果您使用的是 intelliJ 之类的 IDE，它往往会在格式化时将它们隔开。
你可以看看ng2-completerdemo中的一个例子