0
213
VistasAngular agregar directiva fxFlex de otra directiva
Estoy tratando de agregar todas las directivas fxFlex fxFlex.gt-xs a través de otra directiva personalizada para poder mantener mi html lo más limpio posible. He creado la siguiente directiva
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"); } }y usarlo de la siguiente manera
<div coreFlexInput></div>Pero no agrega ni flexiona la funcionalidad al inspeccionar el dom. Si lo uso de esta manera, entonces está funcionando, lo cual espero de todos modos.
<div coreFlexInput fxFlex fxFlex-gt-xs="33"></div>¿Es un enfoque correcto o me estoy perdiendo algo?
1 Respuestas
Responde la pregunta0
No creo que pueda agregar directivas dinámicamente sin pasar por los pasos del compilador y es solo un proceso demasiado complicado . Tuve el mismo problema y terminé creando un nuevo contenedor con todas las directivas requeridas y eliminando el contenido del padre original a uno nuevo.
así es como se verá el dom final 
aquí está plnkr: https://plnkr.co/edit/0UTwoKHVv8ch1zlAdm52
@Directive( { selector: '[anotherDir]' }) export class AnotherDir { constructor(private el: ElementRef) { } ngAfterViewInit() { this.el.nativeElement.style.color = 'blue'; } } @Component({ selector: '[parent]', template: ` <ng-template #tpl> <div anotherDir><ng-content></ng-content></div> </ng-template> ` }) export class Parent { @ViewChild('tpl') tpl: TemplateRef<any>; constructor(private vc: ViewContainerRef) { } ngAfterViewInit() { this.vc.createEmbeddedView(this.tpl); } } @Component({ selector: 'my-app', template: ` <div> <div parent> here is the content </div> </div> `, }) export class App { constructor() { } }