如何将宿主组件的 CSS 类传递给子组件？答案

【问题标题】：How to pass host component's CSS class to children?如何将宿主组件的 CSS 类传递给子组件？
【发布时间】：2018-04-30 08:42:53
【问题描述】：

我不明白如何将宿主组件 CSS 类传递给子元素。我创建了一个自定义元素：

...

const CUSTOM_INPUT_VALUE_PROVIDER: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => FormFieldComponent),
  multi: true,
}

@Component({
  moduleId: module.id,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [CUSTOM_INPUT_VALUE_PROVIDER],
  selector: 'form-field',
  template: `
    <div>
      <input
        (change)="onChange($event.target.value)"
        (blur)="onTouched()"
        [disabled]="innerIsDisabled"
        type="text"
        [value]="innerValue" />
    </div>
  `
})
export class FormFieldComponent implements ControlValueAccessor {
  @Input() innerValue: string;

  innerIsDisabled: boolean = false;

  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.value = value;
    }
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }

  setDisabledState(isDisabled: boolean) {
    this.innerIsDisabled = isDisabled;
  }

  get value(): any {
    return this.innerValue;
  }

  set value(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
      this.onChange(value);
    }
  }
}

然后以某种反应形式像这样使用它：

<form-field formControlName="title"></form-field>

问题：我在FormBuilder 到title 表单控件中添加了一些验证，当它没有通过验证时，Angular 将经典css 类添加到form-field 元素：ng-pristine ng-invalid ng-touched。

如何将这些 CSS 类从宿主元素传递到 form-field 组件中的输入元素？

它与Angular 2 styling not applying to Child Component 不重复。更改 Encapsulation 并不能解决问题。

【问题讨论】：

好的，我重新阅读了这个问题。这是一个真实的例子吗？为什么要这样做，而不是在使用 <form-field> 的地方只使用 <input> 元素？这似乎增加了不必要的复杂性，尤其是当您已经有了响应式表单时。
@msanford，没错。我认为这个变体更加模块化，你可以使用form-field 而不是input 并且到处都是相同的风格和逻辑

标签： css angular

【解决方案1】：

我认为有一种方法可以通过只知道托管元素的角度类而不一定将它们传递下来来做你想做的事情。

如果是这样，您的解决方法将在自定义表单元素的 css 中如下所示：

:host.(ng-class)>>>HTMLelement {
  property: value
}

例子：

:host.ng-valid>>>div {
  border-left: 5px solid #42a948;
}

其中的“:host”部分允许我们使用托管（父）html 元素
">>>" 是深度选择器，它允许我们将这些样式应用于所有匹配选择属性的子项（在本例中，我们正在寻找 div 元素）

【讨论】：