javascript - 如何使用 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

我看到两个解决方案。
方案一:HTML模板
定义一个 HTML template并将其 id 传递给 Angular 组件。在那里克隆该节点(参见链接中的示例)并将其添加到 DOM。
占位符 ({{query}}) 在该模板中不能“开箱即用”。你可以手动替换它们，或者只是更新模板并观察 Angular 组件的变化。 (Mutation Observer)
我现在正在研究这个想法......一旦我的代码在 GitHub 上，我将在此处发布更新，以便您查看它。
方案二:JS模板
另一个想法是使用 JS 模板。 (例如 EJS)
您定义一个模板字符串，然后将其传递给 Angular 组件。在那里你用给定的数据对象渲染它。