我想使用 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 上下文之外执行此操作。
谁能解释一下如何做到这一点？
我看到两个解决方案。
解决方案 1：HTML 模板
定义一个HTML模板 https://developer.mozilla.org/de/docs/Web/HTML/Element/template并将其 id 传递给 Angular 组件。您可以克隆该节点（请参阅链接中的示例）并将其添加到 DOM。
占位符 ({{query}}）在该模板中不能“开箱即用”。您可以手动替换它们，或者只更新模板并观察 Angular 组件中的更改。 （变异观察者 https://developer.mozilla.org/de/docs/Web/API/MutationObserver)
我现在正在研究这个想法...一旦我的代码发布在 GitHub 上，我就会在这里发布更新，以便您可以查看它。
方案二：JS模板
另一个想法是使用 JS 模板。 （EJS https://ejs.co/例如）
您定义传递给 Angular 组件的模板字符串。在那里，您可以使用给定的数据对象来渲染它。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
