我对 Angular 还很陌生，所以这似乎是一个愚蠢的问题。但我从互联网上找不到有关我的问题的信息。
我一直在尝试将一些 JavaScript 代码包含到 Angular html 模板中。但由于某种原因，它没有被执行。
我还尝试将一些js文件加载到模板中，以便在 View 中执行一些功能。我将这些文件包含在根 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 开发人员工具加载到 View 中。但它们没有被调用。
如果需要更多代码，请告诉我。
最佳答案
请遵循本教程
你的模板project.template.html包含不受信任的值，它将被Angular清理
https://angular.io/docs/ts/latest/guide/security.html
Sanitization and security contexts
Sanitization is the inspection of an untrusted value, turning it into a value that is safe to insert into the DOM. In many cases, sanitization does not change a value at all. Sanitization depends on context: a value that is harmless in CSS is potentially dangerous in a URL.
Angular defines four security contexts—HTML, style, URL, and resource URL:
- HTML is used when interpreting a value as HTML, for example, when binding to innerHtml
- Style is used when binding CSS into the style property
- URL is used for URL properties such as
- Resource URL is a URL that will be loaded and executed as code, for example, in
Angular sanitizes untrusted values for the first three items; sanitizing resource URLs is not possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.
Trusting safe values
Sometimes applications genuinely need to include executable code, display an from some URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these situations, you can tell Angular that you inspected a value, checked how it was generated, and made sure it will always be secure. But be careful! If you trust a value that might be malicious, you are introducing a security vulnerability into your application. If in doubt, find a professional security reviewer.
You can mark a value as trusted by injecting DomSanitizer and calling one of the following methods:
- bypassSecurityTrustHtml
- bypassSecurityTrustScript
- bypassSecurityTrustStyle
- bypassSecurityTrustUrl
- bypassSecurityTrustResourceUrl
关于Angular 2模板内的Javascript未执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42073039/