如何使用 Angular Elements 创建具有可自定义模板的 Web 组件？

Question

我想使用 Angular Elements 创建一个 Web 组件库，该库具有默认模板，但允许开发人员覆盖输出。

例如，考虑一个搜索结果组件。我可能有一个如下所示的默认模板：

<h1>Search results for: {{query}}</h1>

但开发人员可能希望将输出更改为此（作为任意示例 - 它需要灵活）：

<h1>You searched for <strong>{{query}}</strong></h1>

我的第一个想法是简单地使用ng-content这样的：

<search-results>
    <h1>You searched for <strong>{{query}}</strong></h1>
</search-results>

然而，这不起作用，并且会直接输出{{query}}.

然后我发现我可以TemplateRef在组件上添加一个输入参数并传入一个ng-template可以解析表达式的元素。这在 Angular 应用程序中运行良好，但我不确定如何使用 Angular Elements 生成的已编译 Web 组件在 Angular 上下文之外执行此操作。

谁能解释一下如何做到这一点？

Answer 1

我看到两个解决方案。

解决方案 1：HTML 模板

定义一个HTML 模板并将其 id 传递给 Angular 组件。您可以克隆该节点（请参阅链接中的示例）并将其添加到 DOM。

占位符 ( {{query}}) 在该模板中不能“开箱即用”。您可以手动替换它们，或者只更新模板并观察 Angular 组件中的更改。（突变观察者）

我现在正在研究这个想法...一旦我的代码发布在 GitHub 上，我就会在这里发布更新，以便您可以查看它。

方案二：JS模板

另一个想法是使用 JS 模板。（以EJS为例）

您定义传递给 Angular 组件的模板字符串。在那里，您可以使用给定的数据对象来渲染它。