angularjs - Including external javascript libraries inside Angularjs 2 component templates

Question

Angularjs 2 documentation mentions,

Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden in order to eliminate any possibility of JavaScript injection attacks (in practice it is simply ignored).

So is there any other way of including external javascript files to a Component template? (like a chart plugin, j3d etc.)

My problem in details..

I have some charts inside a angular2 template(say charts.html). These charts are some what interactive.. They show more details when user move the pointer on the charts. (JQuery based) . Since I am injecting charts to index.html dynamically (with angularjs), those charts plugins doesn't recognizing dynamic content. (even some css properties doesn't apply to the classes of the dynamic contents).

Answer 1

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

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

• Angular2 相当于 AngularJS $watch 是什么？- Mark Rajcok 深入描述了 ZonesJS 的使用方式以及与变更检测的链接
• Angular2 中的更改未更新视图- Günter Zöchbauer 和 alexpods 都描述了在将 Mousetrap 外部库集成到 Angular2 时如何修复 ZoneJS 问题

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

要考虑的另一件事是您的外部库是否支持模块或不能使用 arequire或import.

编辑

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

关于用户移动支持，你需要在你的组件中自己去监听，并使用执行相应的处理NgZone，才能参与到变化检测中。你可以看看这个问题：

• ngModel 在控制器中更新，但不在视图中，角度 2

希望它可以帮助你，蒂埃里