我正在使用Angular(v4.3.1)和Bootstrap(v4.0.0-alpha.6)。模板包含两个子像这样:Bootstrap 4卡包装与包装元素
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
两个子组件的模板有作为根元素的类.card
Bootstrap类。在下面的HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
问题
<div class="card">
...
</div>
这一次编译的结果是,.card-deck
造型没有得到正确applyed如果有包裹.card
元素的元素。
一个Bootstrap的例子,这个问题与Bootstrap css严格相关,而不是明显的Angular。
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
任何人都知道一个办法让这两个部件的结构和造型方面的工作?
**选项2 **落得最终是完美的。最后我使用了'@Component.host方法。 –