Question

我有一个带选择器app-select

的组件

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css'],
  providers: [ObjectUtils],    
})

  @Input() placeholder: string; 
  @Input() dataKey: string;
  @Input() inputDisabled: boolean;
  @Input() tabindex: number;
  @Input() inputId: string;
  @Input() minimal: boolean;
  @Input() label: string;
  @Input() stylesObj: string;

此组件的模板如下所示：

<div ngbDropdown [attr.id]="inputId" [attr.tabindex]="tabindex" [class.select--disabled]="inputDisabled" [class.input-field]="true" [minimal]="minimal" [ngStyle]="stylesObj">
... inner structure of the component ...
</div>

正如您所见，模板为此元素提供了[class.input-field]="true"类。

我必须使用提供的css文件，该文件具有为.input-field:last-child

定义的特殊样式

这是问题所在，因为angular会在app-select包装器中呈现组件，因此始终为:last-child

我希望能够将多个组件与一个类组合在一起＆＃34; .input-field＆＃34;

父组件的模板类似于：

  <div class="col-ul-5">
    <app-select [stylesObj]="{'width': '100%'}" [tabindex]="'1'" [options]="documentFamilyOptions" [placeholder]="'Dokument-Familie '"
      [label]="'Dokument-Familie'" [inputId]="'select-dokument-familie'"></app-select>
    <app-select [stylesObj]="{'width': '100%'}" [tabindex]="'1'" [options]="dateRangeOptions" [placeholder]="'Datumsbereich wählen'"
      [label]="'Datumsbereich'" [inputId]="'select-datumsbereich'"></app-select>
    <div class="input-field input-field--static-label" data-init="auto">
      <input type="text" id="static-label-input-1" placeholder="User Name">
      <label for="static-label-input-1">User Name</label>
    </div>
  </div>

我需要使用angular来渲染3个组件（两次app-select和一次我的div组件）都有class＆＃34; input-field＆＃34;在同一个元素中，但是我得到了app-select包装器，它打破了CSS：last-child层次结构。

添加多个角度组件，而不将包装器标签放在同一元素中

0 个答案: