将指令添加到父母指令的孩子中

Question

在AngularJS中，我们曾经具有pre和post函数，以及在需要时$compile模板的能力。在Angular(2 (中没有办法进行此操作，是否存在？

具体来说，我想要实现的是，拥有这样的模板：

<form myDirective>
    <input type="text" />
    <input type="text" />
</form>

使myDirective动态地添加另一个指令(例如anotherDirective(，向所有主机的input的孩子添加。这有可能吗？

Answer 1

不可能。您不能动态分配指令，无论是在另一个指令还是完整组件中(组件被视为具有模板的指令(。

动态操纵硬性(例如CSS(属性的唯一方法是使用Renderer2并在您的myDirective中访问主机元素的孩子：

constructor(private hostEl: ElementRef){}
ngOnInit() {
    if(hostEl.nativeElement.children.length) { 
        hostEl.nativeElement.children.forEach(el => {if (isInput(el) { useRenderer2InSomeWay(el) })})
    }
}

但是我要做的是将anotherDirective直接放入每个输入中，因此您不必访问儿童，或者(甚至更好(认为根本不使用指令，而只是为<input>定义包装器组件：

        <my-input-wrapper
          <input
            [config]="someConfigToApplyToInputInside"
            [formControlName]="'foobar'">
          </input>
        </my-input-wrapper>

和MyInputWrapperComponent：

@ContentChildren('input') inputs: QueryList<any>;

使用ContentChild/ContentChildren，您可以从周围的组件中访问FormControls，但仍然会委派UI-STUFF，例如您想要在输入中拥有的自定义占位符和图标，转到包装器中的compontent。