我创建并导出了一个Angular Element(Angular中的Web组件)作为单个脚本标记(user-poll.js) . 要使用此Angular元素,我只需在主机站点中指定以下两行:
<user-poll></user-poll>
<script src="path/to/user-poll.js"></script>
我有以下要求:
-
在外部站点上加载多个Angular Elements .
-
动态加载所有角度元素
我有以下问题:
-
在站点上加载多个组件会产生角色冲突,因为每个组件脚本本身都是一个完整的Angular应用程序 .
-
为了解决冲突问题,我将每个组件加载到一个单独的 Shadow Dom 组件中(即在shadow dom容器中添加组件标记和组件脚本文件链接),以便每个组件都被沙箱化 . 但是阴影内的组件脚本无法正常工作 .
JSBin example阴影dom内的动态加载组件
<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 Elements的最佳方法是什么?
1 回答
脚本未执行的事实与Shadow DOM无关,而是与您尝试插入
<script>
元素的方式有关,即通过innerHTML
中的字符串 . 在这种情况下,不解释字符串并且不执行脚本 .如果您希望它工作,您必须通过
appendChild()
插入<script>
.您可以通过添加使用
createElement()
创建的<script>
元素或使用<template>
元素直接执行此操作 .1. with createElement()
创建一个
<script>
元素并将其附加到其父元素:2. with a <template> tag
附加
<template>
元素的内容:解析
<template>
元素时,不执行该脚本,但将其content
附加到DOM时 .PS :无论如何我'm not sure it'是加载多个Angular元素的最佳方式:Shadow DOM不会像J4代码那样充当沙盒,就像
<iframe>
一样 . 相反,也许你必须使用模块加载器 .