Javascript 角度：将零部件动态插入到特定位置

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

第一次尝试是定义

@指令

，如下所示

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

但这并不适用于其他模块内部的angular

第二，动态注入组件

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

。这似乎是可行的，但我想知道这是不是一个坏主意，如果有一个角度的方法来做到这一点，或更好的黑客/解决方案？如果您有任何帮助，我们将不胜感激

您要操作的输入元素是如何创建的？你能把它添加到一个角度视图中，然后在它后面添加一个角度元素吗？我需要操作输入元素操作方式和原因？输入元素是@components模板的一部分。这个组件是我使用的第三方库的一部分。但我的应用程序需要在手机上有自定义输入字段。因此，我需要隐藏输入字段并显示自定义组件。