Angular 5创建父模板

Question

在我的html中，我有多个我正在编写的实例：

<div class="col-11 col-md-10 pb-2">
    <div class="card w-100">
        <div class="card-body row">
            elements that change here
        </div>
    </div>
</div>

考虑到Angular的目的，这似乎违反直觉，所以我怎么可能写出一些变体：

<outer-elements>
    standard inner elements
</outer-elements>

组件或指令似乎没有做到这一点（据我所知，迄今为止），因为内部元素不遵循可以轻松输入的特定模板/格式。

Answer 1

您正在寻找的是Angular中的transclusion。它允许组件定义一般结构，同时在其中注入内容（可能有多个内容）。

您的组件模板应如下所示：

<div class="col-11 col-md-10 pb-2">
  <div class="card w-100">
    <div class="card-body row">
      <ng-content></ng-content>
    </div>
  </div>
</div>

看一下this very nice tutorial on it我之前跟进过来了解这个概念。