Question

我无法理解如何将主机组件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类从host元素传递到form-field组件中的输入元素？

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

Answer 1

我认为通过了解托管元素的角度等级并且不一定要将它们传递下去，我们可以做任何你想要的事情。

如果是这样，你的解决方法在自定义表单元素的css中看起来像这样：

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

示例：

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

＆＃34;：主持人＆＃34;部分内容允许我们使用托管（父）html元素
＆＃34;＆gt;＆gt;＆gt;＆＃34;是深度选择器，允许我们将这些样式应用于匹配选择属性的所有子项（在这种情况下，我们正在寻找div元素）

如何将主机组件的CSS类传递给子级？

1 个答案: