单页中使用 Angular 元素开发的多个自定义元素

Question

我在不同的 Angular 元素项目中开发了 2 个自定义元素，当我尝试在单个 html 中使用它们时，出现错误“无法在‘CustomElementRegistry’上执行‘定义’：此名称已与此注册表一起使用”如何关注此链接开发https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a

我知道它与加载两次打包在两个自定义元素中的库有关。如何解决这个问题？

谢谢

Answer 1

问题： Elements 打包了整个 Angular 并将其作为单个 JS 文件输出。当其中两个在单个页面上运行时，会发生一些可怕且奇怪的冲突，这些冲突可能会也可能不会影响您的元素的行为（很可能会）。

解决方案：我能够让 2 个角度元素在单个页面上完美工作的唯一方法是将它们组合到单个应用程序中。它们仍然是单独的元素，这意味着您可以在页面上的任何位置独立地包含这些自定义标签。

您仍然可以按照以下步骤构建自定义元素，但在app.module.ts文件中只需添加您想要定义的任何其他元素：

  ngDoBootstrap() {
    const ele1= createCustomElement(ComponentOne, { injector: this.injector });
    customElements.define('my-ele-one', ele1);

    const ele2= createCustomElement(ComponentTwo, { injector: this.injector });
    customElements.define('my-ele-two', ele2);

    const ele3= createCustomElement(ComponentThree, { injector: this.injector });
    customElements.define('my-ele-three', ele3);

    ....
  }

你的 HTML 可能看起来像

<h1> My Elements </h1>

<my-ele-one></my-ele-one>

<p>What a cool element!</p>

<my-ele-two></my-ele-two>

<div class='turtle'>
 <p><my-ele-three></my-ele-three></p>
</div>

这甚至可能会减少您的整体页面开销，因为现在您不会拉入两个完整的应用程序。

我可能花了 50 多个小时尝试配置两个单独的 Angular Elements 应用程序以使其协同工作，但没有成功。我确实需要支持所有浏览器，这绝对是一个重要因素，因为我可以让某些配置在 Chrome 或 IE 中工作，但不能同时在两者中工作。我的元素也不是简单的元素，它们有很多工作部分（引导模式、农业网格等）。希望这对将来的人有帮助。