Angular :: ng-deep仅用于子组件

Question

我想将左边距留给“ mat-autocomplete-panel”

我在四个不同的组件中使用此选择框组件。我想改变。mat-autocomplete-panel仅为其中之一提供保证金，我不想影响其他人。

所以我的问题基本上是：

当我使用以下代码时，所有子组件都会受到影响，但我只想给其中的一个留空白

::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

我也尝试过下面的代码，但是没有用。

:host ::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

我已经使用cli g c创建了所有组件，并且它们使用的是.scss文件，但我将其更改为.css，但效果不佳。

Answer 1

您可以将自动填充面板包装在某个div中，例如

<div class="autocomplete-wrapper">
   <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
 </div>

结束然后使用此样式：

:host .autocomplete-wrapper ::ng-deep .mat-autocomplete-panel  {
  margin-left: -1200px;
}