原因(这是angularTS项目):
我想为我的HTML元素提供一些样式,比如<input>
。如果我将它包装到一个组件(<my-input>
)中,那么我还需要注意许多其他逻辑,例如双向绑定(通过angular获得input
标签的大量原始支持丢失)。这使得维护和驾驶非常困难。
所以,我想创建一个属性指令来做到这一点。现在我可以再添加一个属性,如<input fancyStyle='floating'>
,并使用其他有角度的东西,例如ngModel或FormValidation。
工作但不完美的方式:
我可以使用host或hostBinding或renderer来添加一堆单一样式:renderer.setElementStyle(el.nativeElement, 'color', this.fancyStyle);
renderer.setElementStyle(el.nativeElement, 'other1', this.fancyStyle);
renderer.setElementStyle(el.nativeElement, 'other2', this.fancyStyle);
非常详细..
真正的问题在这里-----&gt;
或者使用renderer.setElementClass()
或host: {'[class.someclass]': 'true'}
来设置一个类,但问题是我必须将这个实际的类放到全局样式表或特定组件的样式表中,当我有更多指令时这会变得一团糟并且很难维护。有没有办法/黑客像组件的方式一样使用它(将样式文件与此指令相关联,并将它们放在同一个文件夹中)?或者有没有办法包装组件而不影响它的原始用法?
或者有没有办法配置webpack来做到这一点? (在Ionic项目中注意到,我可以为未在组件中设置styleUrls的文件添加样式,但不确定它们如何配置它。)