Angular：将组件动态插入特定位置

Question

我正在使用第三方模块，其中组件使用HTML输入元素。我想在这个输入元素旁边动态添加一个角度组件，因为我需要操作输入元素。

首次尝试定义@Directive如下

@Directive({
    selector: 'input',
  ...

但是这不适用于其他模块中的角度。

其次，动态注入一个组件

const factory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const ref = this.viewContainerRef.createComponent(factory);        
    ref.changeDetectorRef.detectChanges();

然后将它移到正确的位置

const el = this.elementRef.nativeElement.parentElement.querySelector('dynamic-comp');
input.parentElement.appendChild(el);

input是有问题的输入元素。这似乎有效，但我想知道这首先是不是一个坏主意，如果有一个有角度的方式来做到这一点，或更好的黑客/解决方案？任何帮助将不胜感激