angular - 具有自定义元素主机的 Angular 和 Bootstrap 输入组

问题描述

我有一个自定义的 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。我看到了两种可能的解决方案：

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

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

谢谢

标签： angularbootstrap-4angular-ui-bootstrap

angular - 具有自定义元素主机的 Angular 和 Bootstrap 输入组

问题描述

解决方案

推荐阅读