你能在 Angular2 中实现一个使用 <script> 标签的小部件吗？答案

【问题标题】：Can you implement a widget that uses a <script> tag in Angular2?你能在 Angular2 中实现一个使用 <script> 标签的小部件吗？
【发布时间】：2016-02-05 16:07:20
【问题描述】：

我们有一个使用我们编写的<script> 标签的现有小部件，供第三方客户添加到他们的网站。添加后，它会为小部件生成所有 HTML、表单等。我们这样做是为了避免 iframe 的所有麻烦。

据我了解，Angular2 不允许在模板中使用<script> 标签？我认为他们有很多像我们一样工作的小部件？在Angular2中有什么方法可以做到这一点吗？还是我们错过了标记，完全有更好的方法（iframe？）来执行类似的功能？

它用 jQuery 编写的小部件本身，我不确定它是否重要，但确实如此。我很乐意在 Angular2 中重新编写小部件，但它仍然必须“插入”到任何网站。

【问题讨论】：

你是对的，Angular 不允许在模板中使用<script> 标签。 “避免 iframe 的所有麻烦”的小部件非常模糊？实际要求是什么？
当然，考虑一个脚本，它可以显示可用属性列表并允许您查看它们。您有一个产品可以为人们构建这种逻辑和视图，并且您希望他们能够在自己的网站中使用它。这很简单，一个传递几个变量的脚本标签（取决于用户，可能选择一种样式）。他们需要做的就是将该脚本标签粘贴到他们想要在他们网站上的页面中，然后tada，所有视图和逻辑（发回我们的服务器）都在那里。

标签： jquery widget angular

【解决方案1】：

Angular1 不会触发来自模板的脚本标签（除非你也使用了 jQuery），Angular2 也可能做同样的事情。然而，没有什么能阻止你用纯 JS 插入脚本标签。

我在 Angular2 中没有这样做，但在 Angular1 中我会在指令中执行类似的操作。

document.createElement('script');
script.src = "/assets/game/dmloader.js";
document.getElementsByTagName('head'[0].appendChild(script);

我会假设在 Angular2 中也有同样的效果。

【讨论】：

【解决方案2】：

对于那些寻找实际 ng2 语法的人（感谢您的想法 - 逻辑是正确的）

import {Component, ElementRef, Directive} from 'angular2/core';

@Directive({ selector: '[mywidget]' })

export class MyDirective {
    constructor(private el: ElementRef) {
       let tag = document.createElement('script');
       tag.id = "scriptId";
       tag.setAttribute("myattr", "myvalue");
       tag.src = "https://cdn.acmeproject.org"
       this.el.nativeElement.appendChild(tag); 
     }
}

【讨论】：