Question

在角度2中我需要创建一个带有冗余部分的大型html模板。因此，我想创建多个html模板，并将它们包含在主html文件中（如angular1中的ng-include）

但是如何在主模板中包含子模板？

示例：

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

-

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

-

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>

Answer 1

你可以创建像sub1 sub2等组件。在这些子组件上添加这些html文件作为模板。

在主html上分别调用组件选择器。它会起作用

Answer 2

首先让我告诉你，Angular2不支持来自 ng-include 的 Angular1.x ，所以很明显 {{1} $Compile 中不存在。因此，您可以继续使用 Angular2 ，如此处所示，使用角度上下文动态添加HTML。

DEMO - （CFR）： https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

如果您的HTML内容具有角度上下文，则应使用 CRF-ComponentFactoryResolver 。

与 CFR-ComponentFactoryResolver 一样，您有 sub1.html ，您可能需要点击它并触发其点击事件。这可以通过 button 来实现，如下所示，

您可以使用 CFR 做很多事情。这可能是最简单的例子。

CRF

angular 2包含html模板

2 个答案: