Question

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

＆＃xA;＆＃xA;

根据我的理解，Angular2不允许在模板中使用＆lt; script＆gt; 标记？我认为他们的许多小部件都像我们的方式一样工作？有没有办法在Angular2中做到这一点？或者我们是否错过了标记，并且有一个更好的方法（iframe？）来执行类似的功能？

＆＃xA;＆＃xA;

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

＆＃xA;

Answer 1

Angular1不会触发模板中的脚本标记（除非您也使用了jQuery），而Angular2可能会做同样的事情。但是，没有什么可以阻止您使用纯JS插入脚本标记。

我没有在Angular2中这样做，但是在Angular1中我会在指令中做这样的事情。

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

我会在Angular2中承担相同的工作。

Answer 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); 
     }
}

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

2 个答案: