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

Question

Angularjs 2 文档提到，

几乎所有的 HTML 语法都是有效的模板语法。

那么还有其他方法可以将外部 javascript 文件包含到组件模板中吗？ （如图表插件、j3d 等）

我的问题详细..

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

Answer 1

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

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

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

这是另一个描述如何在 Angular2 中使用 toastr 的问题：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

希望对你有帮助 蒂埃里