时间戳

首页 > 解决方案 > 如何使用纯 JS 导入 2 个或更多 Angular 组件？

javascript - 如何使用纯 JS 导入 2 个或更多 Angular 组件？

问题描述

我构建了一个 Angular（最新版本）组件，我需要多次将其导入旧式 HTML/JS 页面。

目前，这个 Angular 组件是一个 HelloWorld 组件，当用户单击纯 HTML 页面上的特定元素时，我想附加一个 HelloWorld 组件的新实例：

<div onclick="divClicked()">Click here to add more component!</div>

目前，它适用于以下代码的第一次点击，但不适用于其他 clics：

    function divClicked(e) {
        body = document.getElementById("dest")
        app = document.createElement("app-root")
        body.append(app)

        loadScript("dist/angular-app/runtime.js")
        loadScript("dist/angular-app/polyfills.js")
        loadScript("dist/angular-app/main.js")

        console.log("Div clicked", body)
    }

    function loadScript(url) {
        var script = document.createElement('script');
        script.onload = function () {
            console.log("Script loaded", url)
        };
        script.src = url;

        document.head.appendChild(script);
    }

以下 clics 生成 app-root 标记，但它没有填充 Angular 的内容。请参阅下面生成的 DOM： 在此处输入图像描述

如何将我的组件多次用于纯 HTML/JS 页面？

标签： javascriptangular

解决方案

嗨，请使用角度元素。

您可以构建并使其成为您在纯 HTML 中引用的单个 js 文件并使用角度组件。

请找到以下解决方案：

https://dev.to/maulik/using-angular-component-in-non-angular-app-1p0g

推荐阅读