带有自定义元素主机的 Angular 和 Bootstrap 输入组

Question

我有一个自定义的 Angular 元素 - 基本上是 HTML 输入，带有对数字输入或日期输入的验证。在 Angular 模板中的用法：

<div class="input-group">
    <app-input-number 
        formControlName="amount_received"
        ngbAutofocus 
        class="form-control"   
    >
    </app-input-number>

    <div class="input-group-append">
        <span class="input-group-text">USD</span>
    </div>
</div>

渲染输出：

<div _ngcontent-omn-c8="" class="input-group">
 <app-input-number _ngcontent-omn-c8="" class="form-control-host ng-pristine ng-valid ng-touched" formcontrolname="amount_received" ngbautofocus="" _nghost-omn-c10="" ng-reflect-name="amount_received">
  <input _ngcontent-omn-c10="" class="form-control text-right" type="text">
 </app-input-number>

 <div _ngcontent-omn-c8="" class="input-group-append">
  <span _ngcontent-omn-c8="" class="input-group-text">EUR</span>
 </div>
</div>

问题是自定义元素 <app-input-number 。我看到了 2 种可能的解决方案：

1/修改引导选择器：将.input-group > .form-control改为.input-group .form-control，我想避免一些硬编码覆盖。有什么办法可以修改吗？

2/ 渲染没有包装标签的 Angular 组件。这可能吗？

谢谢

Answer 1

如果您不想添加额外的自定义元素，请考虑改用指令。 Angular Material Input 组件就是一个很好的例子：https://material.angular.io/components/input/overview