我正在尝试通过另一个自定义指令添加所有 fxFlex fxFlex.gt-xs 指令,以便我可以保持我的 html 尽可能干净。我创建了以下指令
import { Directive, ElementRef, Renderer, OnInit } from '@angular/core';
@Directive({
selector: '[coreFlexInput]'
})
export class FlexInputDirective implements OnInit {
constructor(private el: ElementRef, private renderer: Renderer) {
// Use renderer to render the element with 50
}
ngOnInit() {
this.renderer.setElementAttribute(this.el.nativeElement, "fxFlex", "");
this.renderer.setElementAttribute(this.el.nativeElement, "fxFlex.gt-xs", "33");
this.renderer.setElementClass(this.el.nativeElement, "padding-5", true);
this.renderer.setElementStyle(this.el.nativeElement, "line-height", "50px");
this.renderer.setElementStyle(this.el.nativeElement, "vertical-align", "middle");
}
}
并使用它如下
<div coreFlexInput></div>
但在检查 dom 时,它并没有添加和扩展功能。如果我以这种方式使用它,那么它无论如何都可以正常工作
<div coreFlexInput fxFlex fxFlex-gt-xs="33"></div>
这是一个正确的方法还是我错过了什么?