我正在使用Angular (v4.3.1)和Bootstrap (v4.0.0-alpha.6)进行工作。一个模板包含两个子组件,如下所示:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
两个子组件的模板的根元素的类都是 .card
Bootstrap 类。
<div class="card">
...
</div>
这段代码一旦编译,将会得到以下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>
问题在于,如果有一个元素包装了
.card
元素,那么.card-deck
样式将不能正确应用。这是一个仅使用Bootstrap的示例,这个问题显然与Angular无关。
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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>
有没有办法同时获取组件结构和样式呢?
@Component.host
方法。 - Nathan Lepori