引导行类不向下传播到角中的组件

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>

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

div class=“行” -应用程序-文本框 - div class=“col 12” -输入

而“旧风格”则生成以下内容：

div class=“行” - div class=“col 12” --投入

处理它的一种方法是设置主页面中组件上的列，如下所示。

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

然而，有两个问题困扰着我，使我觉得不愿意这样做。第一种情况是，相对于封装组件，组件的两边仍然有一个(非常小的)额外的15 it (所有项目都有它，但是定制的app-textbox获得它两次，可能是由于封装)。另一个问题是，这种类型的封装违背了封装的目的。

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

是否有可能使注入的标记应用程序文本框在其父程序中完全扩展？

Answer 1

要使css在所有组件中可见，请将其直接添加到index.html文件或app.component.css中。

例如，在index.html上，作为最后一个head元素，包括：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

该网址取自：https://getbootstrap.com/docs/3.3/getting-started/

(我假设您的Angular2项目是使用角-cli生成的，文件遵循标准名称)

关于额外的保证金，试着检查app.component.html。也许它周围有个容器。还检查index.html本身

Answer 2

我也有过同样的问题。这就是我解决它的方法。

原始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>