angular 2模板中的Javascript未执行_Javascript_Angular

angular 2模板中的Javascript未执行

javascript angular

angular 2模板中的Javascript未执行,javascript,angular,Javascript,Angular,我对Angular很陌生，所以这个问题可能看起来很愚蠢。但我在网上几乎找不到关于我的问题的信息我一直在尝试将一些JavaScript代码包含到一个有角度的html模板中。但由于某种原因，它没有被执行我还尝试将一些js文件加载到模板中，以便在视图中执行一些功能。我将这些文件包括在rootindex.html中，也包括在模板文件中，但是模板中所需的函数没有捕获这些js文件中的代码。我不知道我应该在这里做什么请验证以下代码 project.template.html <div>

我对Angular很陌生，所以这个问题可能看起来很愚蠢。但我在网上几乎找不到关于我的问题的信息

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

我还尝试将一些js文件加载到模板中，以便在视图中执行一些功能。我将这些文件包括在root

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>

<!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>


//所有必需的视图项
$（函数（）{
警报（“hi”）；
});

index.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>

<!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>


标题
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

控制台中没有错误。另外，我看到JS文件从Chrome开发者工具加载到视图中。但它们没有被调用

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

请遵循本教程

您的template project.template.html包含不受信任的值，将由Angular进行清理

消毒和安全上下文

清理是检查不受信任的值，将其转换为可以安全插入DOM的值。在许多情况下，消毒根本不会更改值。卫生处理取决于上下文：CSS中无害的值在网址

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

将值解释为HTML时使用HTML，例如绑定到innerHtml时
将CSS绑定到Style属性时使用Style
URL用于URL属性，例如
资源URL是将作为代码加载和执行的URL，例如，在

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

信任安全值

有时应用程序确实需要包含可执行代码，显示来自某个URL的链接，或构造潜在的危险网址。为了防止在上述任何情况下自动消毒，你可以告诉Angular你检查了一个值，检查了它是怎样的生成，并确保它始终是安全的。但是要小心！如果如果您信任一个可能是恶意的值，则会引入应用程序中存在安全漏洞。如果有疑问，请查找专业安全审查员

您可以通过注入DomSanitizer并调用以下方法之一：

绕过安全信任HTML
绕过安全信任脚本
绕过安全信任样式
绕过安全信任URL
绕过安全性信任资源URL