Question

我对Angular很新，所以这看起来像是一个愚蠢的问题。但我能从互联网上找到关于我的问题的一些信息。

我一直在尝试将一些JavaScript代码包含在角度html模板中。但由于某种原因，它没有被执行。

我还尝试将一些js文件加载到模板中，以便在视图中执行某些功能。我将这些文件包含在根index.html中以及模板文件中，但模板中所需的函数没有捕获这些js文件中的代码。我很困惑我还应该做些什么。

请验证以下代码。

project.template.html

<div>
  // all the necessary view items
</div>
<script src="../../vendor.js"></script>
<script src="../../plugins.js"></script>
<script src="../../main.js"></script>
<script type="text/javascript">
    $(function() {
        alert('hi');
    });
</script>

<router-outlet></router-outlet>

的index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/app/main.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <script src="vendor.js"></script>
    <script src="plugins.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

控制台中没有错误。此外，我看到JS文件已从Chrome开发人员工具加载到视图中。但他们没有被援引。

如果需要更多代码，请告诉我。

Answer 1

请遵循本教程

你的模板 project.template.html 包含不受信任的值，它将被Angular消毒

https://angular.io/docs/ts/latest/guide/security.html

清理和安全背景

清理是对不受信任的值的检查，将其转换为可安全插入DOM的值。在许多情况下，   消毒根本不会改变价值。消毒取决于   上下文：CSS中无害的值在a中是有潜在危险的   URL。

Angular定义了四个安全上下文 - HTML，样式，URL和资源   网址：


将值解释为HTML时使用HTML，例如，绑定到innerHtml
时
将CSS绑定到样式属性
时使用样式
网址用于网址属性，例如

资源URL是将作为代码加载和执行的URL，例如


Angular会清理前三项的不信任值;   无法清理资源URL，因为它们包含   任意代码。在开发模式下，Angular会打印控制台警告   什么时候必须在消毒过程中改变一个值。

信任安全值

有时候应用程序真的需要包含可执行代码，   显示来自某个URL，或构建潜在危险   网址。为了防止在任何这些情况下自动消毒，   你可以告诉Angular你检查了一个值，检查它是怎么回事   生成，并确保它始终是安全的。不过要小心！如果   你相信一个可能是恶意的价值，你正在介绍一个   安全漏洞进入您的应用程序如有疑问，请找一个   专业的安全审查员。

您可以通过注入DomSanitizer并调用来将值标记为可信任   以下方法之一：


bypassSecurityTrustHtml

bypassSecurityTrustScript

bypassSecurityTrustStyle

bypassSecurityTrustUrl

bypassSecurityTrustResourceUrl

角度2模板中的Javascript未执行

1 个答案: