大佬教程收集整理的这篇文章主要介绍了angular – 将多个主机绑定组合到一个装饰器中,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@HostBinding('style.width.%') @HostBinding('style.height.%') private readonly SIZE = 100; @HostBinding('style.display') private readonly DISPLAY = 'block'; @HostBinding('style.Box-sizing') private readonly Box_MODEL = 'border-Box';
我想要做的是创建一个单独的装饰器(在类或属性级别,我不在乎),包括所有这些,所以我不必每次都重写它.
现在,我通过创建一个超类并让我的其他类扩展它来使它工作,但它有很多限制和不便,因此我的问题.
任何帮助,即使它的文档,非常感谢!
编辑我也找到了this SOF question,但与我的问题不同的是变量有一个值,我似乎无法找到如何将这些值传递给我的装饰器.
编辑2解释我的需要:我有这个组件
@Component(...) export class MyAngularComponent extends HostBinderComponent {...}
还有这个
export class HostBinderComponent { @HostBinding('style.width.%') @HostBinding('style.height.%') private readonly SIZE = 100; @BoxComponent() private readonly DISPLAY; @HostBinding('style.Box-sizing') private readonly Box_MODEL = 'border-Box'; }
我的最终目标是删除超类,并有类似的东西
@Component(...) @BoxComponent() export class MyAngularComponent {...}
所以我不再需要在我的Angular组件中使用extends或HostBinding了!
有了这个功能(在检查TS如何调用字段的装饰器之后),我们可以轻松地创建自己的复合装饰器:
import { __decorate } from 'tslib'; function BoxHostBindings() { return function(target) { __decorate([ HostBinding('style.width.%'),HostBinding('style.height.%'),],target.prototype,"SIZE",void 0); __decorate([ HostBinding('style.display'),"DISPLAY",void 0); __decorate([ HostBinding('style.Box-sizing'),"Box_MODEL",void 0); } }
注意:我没有对此进行过广泛的测试,但似乎有效,我希望它能够正常工作.
用法:
@Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'] }) @BoxHostBindings() export class AppComponent { title = 'testapp'; private readonly SIZE = 100; private readonly DISPLAY = 'block' private readonly Box_MODEL = 'border-Box'; }
编辑
设置属性的值有点困难.我们无法轻松访问构造函数执行,因此我们无法执行此操作.
一种选择是在原型上定义值,因为值是只读的,这应该可以正常工作:
function BoxHostBindings(size: number,display: string,Box_model: string) { return function(target) { target.prototype.SIZE = size; target.prototype.DISPLAY = display; target.prototype.Box_MODEL = Box_model; __decorate([ HostBinding('style.width.%'),void 0); } }
我们还可以定义属性以允许用户修改值,并将其存储在字段(‘_’名称)中,但如果值未定义则返回默认值:
function BoxHostBindings(size: number,Box_model: string) { return function(target) { function propHelper(name: string,defaultValue: any) { Object.defineProperty(target.prototype,name,{ get: function () { return this['_' + name] || defaultValue; },set: function(value: any ) { this['_' + name] = value },enumerable: true,configurable: true }); } propHelper("SIZE",size); propHelper("DISPLAY",display); propHelper("Box_MODEL",Box_model); __decorate([ HostBinding('style.width.%'),void 0); } }
以上是大佬教程为你收集整理的angular – 将多个主机绑定组合到一个装饰器中全部内容,希望文章能够帮你解决angular – 将多个主机绑定组合到一个装饰器中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。