Question

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

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

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

.input {
    width: 250px;
}

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

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

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

Answer 1

我建议不要使用::ng-deep since Angular团队planning on deprecating it。

如果你想从你托管的任何组件中设置组件中的某些内容，我建议你创建一个主机绑定/输入，然后使用该值绑定到你的组件使用style-directive。