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 =“row”
   - app-textbox
   - - div class =“col-sm-12”
   - - 输入

而“旧式”产生了这个：

div class =“row”
   - div class =“col-sm-12”
   - 输入

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

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

然而，有两个问题困扰我，让我觉得这种方法不太重要。第一个是组件相对于封闭组件的每一侧仍然获得（非常小）15px的额外边距（所有项目都有它但是自定义 app-textbox 获得它两次，可能是封装）。另一个问题是这种破坏了封装的目的。

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

是否可以使注入的标记 app-textbox 在其父级中完全传播？

Answer 1

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

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

...关于额外保证金，请尝试检查app.component.html。也许周围有一个容器div。另请检查index.html本身

Answer 2

我面临着同样的问题。安装tether和bootstrap npm模块对我有帮助。

npm install bootstrap@3.3.7 --save

npm install bootstrap@3.3.7 tether jquery --save

在.angular-cli.json文件中添加依赖项

"styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],

"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

有关更多信息，您可以参考此链接https://stackoverflow.com/a/48736103/6352772

Answer 3

我有同样的问题。这是我解决问题的方法。

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

Bootstrap行类不向下传播到Angular

3 个答案: