在Angularjs 2组件模板中包含外部JavaScript库

Question

Angularjs 2文档提及，

几乎所有HTML语法都是有效的模板语法。 ＆lt; script＆gt;元素是一个值得注意的例外;为了消除任何JavaScript注入攻击的可能性是禁止的（实际上它被忽略了）。

那么有没有其他方法将外部javascript文件包含到Component模板中？ （如图表插件，j3d等。）

我的问题详情..

我在angular2模板中有一些图表（比如charts.html）。这些图表是一些交互式图表。当用户在图表上移动指针时，它们会显示更多细节。 （基于JQuery）。由于我是动态地将图表注入index.html（使用angularjs），因此这些图表插件无法识别动态内容。 （甚至一些css属性也不适用于动态内容的类）。

Answer 1

我不清楚你想做什么。您只需将它们包含在HTML页面中即可使用外部JavaScript文件。然后，您可以在组件中使用它们。

那就是说，你需要知道它们可能会在Angular2的上下文之外执行。我的意思是他们不会考虑变化检测。事实上，Angular2使用ZoneJS来触发变化检测。以下是关于这方面的两个问题：

• What is the Angular2 equivalent to an AngularJS $watch? - Mark Rajcok深入介绍了ZonesJS的使用方式以及与变更检测的关联
• View is not updated on change in Angular2 - GünterZöchbauer和alexpods都描述了在将Mousetrap外部库集成到Angular2中时如何解决ZoneJS问题

这是另一个描述如何使用toastr进入Angular2的问题：Unable to import toastr module with Angular 2。

另一件需要考虑的事情是，如果您的外部库支持模块，或者不能使用require或import来引用模块。

修改

关于CSS，组件支持shadow DOM。这意味着他们的风格是孤立的。因此，您需要将CSS样式定义到组件（styles属性）中，或将encapsulation模式更改为ViewEncapsulation.None。

关于用户移动支持，您需要在组件中自己监听它们，并使用NgZone执行相应的处理，以便能够参与更改检测。你可以看一下这个问题：

• ngModel updates in controller, but not in the view, angular 2

希望它可以帮到你， 亨利