Question

我一直在玩Angular Elements。我们的团队正在构建多个独立的角度项目并将其转换为Angular Elements。我们还构建了一个主壳，这些角元素将在主壳中被调用。

主外壳由Angular编写。到目前为止，我发现我只能将角度元素嵌入主外壳的index.html中。但是，我想知道是否有一种方法可以使用app.component.html中的角度元素吗？

index.html in mainShell ：在此处使用app1-element可以正常工作。

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
    <script src="../../elements/app1-element.js"></script>
  </head>
  <body>
    <app1-element></app1-element> 
  </body>
</html>

角投影结构如下所示。那么如何在app1-element中使用app.component.html？我在那里使用类似的代码，但它不起作用。顺便说一句，要运行主外壳程序，请使用Go Live

中的mainShell/src

app1
--src
----app
------app.module.ts (customElements.define('app1-element', el);)
--package.json

mainShell
--src
----app
------app.component.html (I want to use 'app1-element' here)
----index.html
--package.json

谢谢！

Answer 1

我想通了。要在app.component.html中使用Angular元素，您需要正确导入.js文件。有两种方法可以实现，您可以使用SystemJS，dimport或通过JQuery进行静态导入。在我的演示中，我静态导入了.js文件，请参考本文here

在app.component.html中使用Angular Element

1 个答案: