在Angular2中注入模板HTML部分

Question

花了几个小时后,用ngTemplateOutlets,componentFactoryResolvers击倒了奇怪的兔子洞,并用ViewChild奇怪的东西围绕着......我在想必须有更好的方法.

我有一个组件,其html模板变得越来越大.纯粹出于组织目的,我想将一些html移动到子模板(其他文件)中.然后,我想在我的主模板中只有一行来引入它们,但是所有内容的范围和上下文应该保持不变.

我可以通过将所有内容包装在自己的组件中来实现它,但这似乎是浪费,我需要在整个地方安装@Output eventEmitters,看起来像是浪费.

我发现最接近"好"的是[innerHtml],但显然这不起作用,因为Angular2不会处理它所引发的html.我真的很惊讶没有直接的方法来做这个...它不需要做任何思考只是一种简单的方法来注入一些正常处理的内联文本.

最佳解决方案看起来像

<div>
    all my regular content
</div>

<template [ngExternalTemplate]="./app/home/templates/my-template.html"></template>

并且在该模板中注入的所有html都可以访问,并且能够访问正常内联html所具有的范围和上下文中的所有内容.

关于如何解决这个问题的任何想法？我讨厌看到html变得庞大,但实际上它不应该分成多个组件,因为它们都在管理相同的视图.

作为最后的手段,我想我可以用gulp取代一点动作,但这似乎超级hacky.

Answer 1

您应该将模板拆分为多个组件，而不是创建非常大的模板。对于您的特定问题，您需要文本预处理器。