從另一個指令角添加fxFlex指令

Question

我想通過另一個自定義指令添加所有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> 

它是一個正確的做法還是我失去了一些東西？

Answer 1

我不認爲你可以動態地添加指令，而無需通過編譯器的步驟，它只是一個過於複雜的進程。我遇到了同樣的問題，並最終創建了一個包含所有必需指令的新容器，並將原始父級的內容移除到新的容器。

這裏是最後的DOM會怎麼看起來像

這裏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() { 
    } 
}