html - Bootstrap 行类不会向下传播到 Angular 中的组件

Question

我有很多这样声明的控件。

<div class="row">
  <div class="col-sm-12">
    <div>Caption</div>
    <input type="text" class="form-control">
  </div>
</div>

为了重构我的代码，我引入了一个组件来封装此特定行为。

<div class="row">
  <app-textbox [caption]="'Caption'"></app-textbox>
</div>

组件的标记只是原始代码的副本。

<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
  <div>{{data?.caption}}</div>
  <input type="text" class="form-control">
</div>

出现的问题是 row 类似乎没有传播到组件。它扩展到整个宽度(因为它设置为 12，但它不是包含 row 类的组件的宽度 - 它更小)。分析浏览器控制台中的标记，我可以看到唯一的区别是在结构中注入(inject)了自定义控件的标记，如下所示:

div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input

而“旧式”生成的是:

div class="row"
-- div class="col-sm-12"
-- input

处理它的一种方法是像这样在主页中的组件上设置列。

<div class="row">
  <app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>

但是，有两个问题困扰着我，使我不愿意采用这种方法。第一个是组件仍然在相对于封闭组件的每一侧获得(非常小的)15px 的额外边距(所有元素都有它，但自定义 app-textbox 得到它两次，可能是由于封装)。另一个问题是这种做法违背了封装的目的。

我试过扩展组件的宽度并为输入框设置不同的样式/类等。几个小时后，我意识到我不知所措。

是否有可能使注入(inject)的标签 app-textbox 在其父级中完全传播？

Answer 1

我遇到了同样的问题。这是我解决它的方法。

原始app.component.html:

<div class="container-fluid">
  <div class="row">
   <app-one></app-one>
   <app-two></app-two>
  </div>
</div>

原始one.component.html:

<div class="col-9">
 <p>One</p>
</div>

原始two.component.html:

<div class="col-3">
 <p>Two</p>
</div>

我将“col”div 从一个和两个组件移到了应用程序组件:

新app.component.html:

<div class="container-fluid">
  <div class="row">
   <div class="col-9">
    <app-one></app-one>
   </div>
   <div class="col-3">
    <app-two></app-two>
   </div>
  </div>
</div>

新one.component.html:

<p>One</p>

新two.component.html:

<p>Two</p>