Angular 2在组件继承模板中包含组件html

我有一个组件a及其html/ts文件。当我从a继承第二个组件B时，这将获取第一个组件上的所有属性和方法。如果我想使用组件A html，我可以在

templateUrl

属性中引用组件A html

我有个问题。我想使用html组件，但我想扩展它。所以我的想法是将第一个组件html“包含”到第二个组件。在Angular2有可能吗？还有别的办法吗

我不想在组件B中创建组件A的实例。我只想要html标记

编辑：

在这个例子中，我的问题是：

当我继承Hello2TS时，如果我在Hello2HTML中创建hello组件的实例，它将使用其

name

属性。我找到了三种解决方案：

将需要在所有继承组件中使用的所有属性更改为输入并注入

重复的html代码

找到一种方法来引用第一个组件的html，而不创建它的实例

---

我认为最好的解决办法是第三种。但我不知道如何做到这一点。

ng content

可以用于在组件中投影动态内容

例如，考虑下面的

hello.component.html

<div id='border'>
    <h1>Base Component</h1>
    <p>ng-content could be used for projecting dynamic content within a component</p>
    <ng-content>
        <!-- Dynamic content goes here -->
    </ng-content>
</div>

<hello>
  <div style="border: 2px solid red">
    <h2>Child Component</h2>
    <button id="sample1"> Sample 1 </button>
    <button id="sample2"> Sample 2 </button>
  </div>
</hello>

基本组件
ng内容可用于在组件内投影动态内容

所以，现在不管两者之间是什么

<hello>
    <!-- dynamic html here -->
</hello>

app.component.html

<div id='border'>
    <h1>Base Component</h1>
    <p>ng-content could be used for projecting dynamic content within a component</p>
    <ng-content>
        <!-- Dynamic content goes here -->
    </ng-content>
</div>

<hello>
  <div style="border: 2px solid red">
    <h2>Child Component</h2>
    <button id="sample1"> Sample 1 </button>
    <button id="sample2"> Sample 2 </button>
  </div>
</hello>

子组件
样本1
样本2

---

希望这有帮助

ng内容（内容投影）对你有用吗？不幸的是没有。。我创建了一个示例来向您展示主要帖子内容中的问题，但无法解决我的问题。我创建了一个示例来向您展示我的问题。这是主要问题。