angular - 在 Angular2 中注入(inject)模板 HTML 部分

Question

在使用 ngTemplateOutlets、componentFactoryResolvers 探索奇怪的兔子洞并研究 ViewChild 的古怪之处之后……我认为必须有更好的方法。

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

我可以通过将所有内容包装在它自己的组件中来让它工作，但这似乎是一种浪费，而且我需要在所有地方都使用@Output eventEmitter，这看起来也很浪费。

我发现最接近“好”的是 [innerHtml]，但显然这行不通，因为 Angular2 不处理它抛出的 html。老实说，我很惊讶没有直接的方法要做到这一点......它不需要做任何思考，只需一种简单的方法来注入(inject)一些正常处理的内联文本。

最佳解决方案看起来像

<div>
    all my regular content
</div>

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

并且注入(inject)到该模板中的所有 html 都可以访问，并且能够访问普通内联 html 范围和上下文中的所有内容。

关于如何解决这个问题的任何想法？我讨厌看着 html 变得庞大，但实际上它不应该被拆分成多个组件，因为它们都在管理同一个 View 。

作为最后的手段，我想我可以用 gulp 来代替 action，但这看起来 super hacky。

Answer 1

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