5

我已经创建并导出了一个 Angular Element（Angular 中的 Web 组件）作为单个脚本标签（user-poll.js）。要使用这个 Angular Element，我只需要在主机站点中指定以下两行：

 <user-poll></user-poll>
 <script src="path/to/user-poll.js"></script>

工作 JSBin 示例

我有以下要求：

  1. 在外部站点上加载多个 Angular 元素。
  2. 动态加载所有 Angular 元素

我有以下问题：

  1. 在站点上加载多个组件会产生 Angular 冲突，因为每个组件脚本本身就是一个完整的 Angular 应用程序。
  2. 为了解决冲突问题，我将每个组件加载到一个单独的Shadow Dom组件中（即在 shadow dom 容器中添加组件标记和组件脚本文件链接），以便每个组件都被沙箱化。但是 shadow dom 中的组件脚本不起作用。

shadow dom 内部动态加载组件的JSBin 示例

<body>

</body>
    setTimeout(() => {
    loadJS();
}, 2000);
function loadJS() {
    var elm = document.createElement("div");
    elm.attachShadow({mode: "open"});
    elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
    document.body.appendChild(elm);
}

那么，在网站上动态加载多个 Angular 元素的最佳方式是什么？

4

1 回答 1

10

脚本未执行的事实与 Shadow DOM 无关，而是与您尝试插入<script>元素的方式有关，即通过innerHTML. 在这种情况下，不解释字符串并且不执行脚本。

如果你想让它工作，你必须插入<script>via appendChild()。

您可以通过添加使用<script>创建的元素createElement()或使用<template>元素来直接执行此操作。

1. 使用 createElement()

创建一个<script>元素并将其附加到其父元素：

var up = document.createElement( 'user-poll' )
var script = document.createElement( 'script' )
script.textContent = 'document.write( "executed" )'
up.appendChild( script )
elm.attachShadow( { mode: 'open' } )
   .appendChild( up )
<div id="elm"></div>

2.带有<template>标签

附加元素的内容<template>：

elm.attachShadow( { mode: 'open' } )
   .appendChild( tpl.content )
<template id="tpl">
    <user-poll>
        <script>document.write( 'exected' )</script>
    </user-poll>
</template>

<div id="elm"></div>

<template>解析元素时不会执行脚本，而是将其content附加到 DOM 时。

PS：无论如何，我不确定这是加载多个 Angular 元素的最佳方式：Shadow DOM 不会像 Javascript 代码那样充当沙箱<iframe>。相反，也许您将不得不使用模块加载器。

于 2018-06-29T20:22:02.333 回答