使用angular 4组件作为小部件(在静态网站上) [英] Using angular 4 component as widget (on a static website)
问题描述
长时间潜伏，第一次问:)
long time lurker, first time asking :)
有没有办法(最好使用<script>标记)将我的angular 4组件(使用webpack的类似于widget的邮件窗口应用程序)注入任何静态网站?
Is there any way to inject my angular 4 component (widget-like mail window app using webpack) into any static website, preferably using the <script> tag?
找到了一些博客文章，但所有文章都使用SystemJS，而我的应用程序使用webpack，看来没有任何结果.
Found some blog posts but all of them are using SystemJS and my app is using webpack and there seem to be no results with that.
感谢您的帮助！
问题已解决，感谢您的所有贡献:)
Problem solved, thanks for all contributions :)
推荐答案
Angular应用程序必须始终具有根元素，该元素通常插入index.html的<body>中.假设您已经编写了小部件，其中的根组件位于是<widget>，则可以将其与页面上的任何静态标记混合使用:
Angular app must always have root element, which is usually inserted in index.html's <body>. Assuming you have written your widget, in which root component f.e. is <widget>, you can mix it up with any static markup you have on your page:
<!doctype html>
<html>
<head>
<title>title</title>
</head>
<body>
<header>
<nav>Brand</nav>
</header>
<aside>
Menu
<!-- It can also be injected in any other element -->
<widget></widget>
</aside>
<main>
Content
</main>
</body>
</html>
如果您的应用是使用Angular CLI(在后台使用webpack)引导的，只需将静态标记放在src/index.html中就可以了.
If your app is bootstrapped with Angular CLI, which under the hood uses webpack, just put your static markup in src/index.html and you are done.
已编辑:如果要将窗口小部件注入任何其他页面，可以尝试执行以下步骤:
Edited: if you want to inject your widget into any other page, you can try to do this with following steps:
- 再创建一个脚本，在其中创建应用程序的根元素，然后将其粘贴到正文中
- 将Angular应用捆绑到静态文件中.为了简单起见，最好有一个.js文件.
- 动态创建脚本元素，并提供静态包到脚本src的路径
- 动态地将其注入页面的正文
类似的东西:
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', () => {
const widgetElement = document.createElement('widget')
// document.body is not necessary here, it can be any other element
document.body.appendChild(widgetElement)
const widgetCode = document.createElement('script')
widgetCode.src = '<path to bundled angular app>'
document.body.appendChild(widgetCode)
})
</script>
我创建了 plnkr ，这可能会对您有所帮助
I've created plnkr, which may help you a bit
这篇关于使用angular 4组件作为小部件(在静态网站上)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
