Question

我正在尝试使用BootStrap在Angular 8中开发一组表单组件，但是有一个奇怪的行为。

以下html效果很好：

<div class="form-group row">
    <label for="input01" class="col-2 col-form-label">First Name</label>
    <div class="col-4">
        <input type="text" class="form-control" id="input01" placeholder="First Name">
  </div>
    <label for="input01" class="col-2 col-form-label">Last Name</label>
    <div class="col-4">
        <input type="text" class="form-control" id="input01" placeholder="Last Name">
  </div>
</div>

我可以看到两个输入的标签并排（每个输入/标签2 + 4列）。

如果我采用此代码段并将其封装在组件中：

<label for="input01" class="col-2 col-form-label">First Name</label>
<div class="col-4">
    <input type="text" class="form-control" id="input01" placeholder="First Name">
</div>

并按以下方式使用它：

<div class="form-group row">
  <app-input-text></app-input-text>
  <app-input-text></app-input-text>
</div>

似乎缩小了。

请注意，它是相同的代码，但封装在组件中。

怎么了？

PS：这是StackBlitz运行代码：https://stackblitz.com/edit/angular-g3zxg3

谢谢。

Answer 1

您可以通过一些解决方法删除包装标签。一种是使用指令或属性选择器，或者使用如下所示的模板注入：

组件

export class InputTextComponent {
  @ViewChild(TemplateRef, { static: false }) template;
  constructor(private vcr: ViewContainerRef) {}

  ngAfterViewInit() {
   setTimeOut(()=> this.vcr.createEmbeddedView(this.template));
  }
}

模板

<ng-template>
  <label for="input01" class="col-2 col-form-label">First Name</label>
    <div class="col-4">
        <input type="text" class="form-control" id="input01" placeholder="First Name">
  </div>
</ng-template>

Stackblitz work around

的原始来源

编辑：如@Emilio Numazaki在注释中所述，如果您公开可绑定的属性，则将引发所提到的异常。因此，需要另一种解决方法来避免这种情况。

Angular + Bootstrap（网格）+组件

1 个答案: