css - 主机样式应用于 Angular2 中的组件

Question

我目前正在为我的 Angular 组件创建自定义表单组件，但遇到了一些样式问题。

我希望我的输入能够采用可变宽度并由主机组件控制。

例如:<my-input class="input">会有一个相应的类:

.input {
    width: 250px;
}

出于某种原因，如果我这样做，规则将被忽略并且不会应用于我的组件。

我见过其他人将他们的组件包装在看似不必要的 div 中，然后设置这些父 div 的样式，以便适合内部内容。当 CSS 规则就足够时，我不想仅仅为了样式目的而编写包装器。

这样做会涉及使用 :host ？ 另外，怎么样，host-context(.input)然后在消费者内部应用类 CSS ？

Answer 1

我建议不要使用 ::ng-deep，因为 Angular 团队是 planning on deprecating it .

如果您想从任何托管您的组件的组件中设置样式，我建议您创建一个主机绑定(bind)/输入，然后使用该值通过样式指令绑定(bind)到您的组件。