如何在 Angular2 中调用内联 javascript 函数？答案

【问题标题】：How can i call inline javascript function in Angular2?如何在 Angular2 中调用内联 javascript 函数？
【发布时间】：2018-02-22 05:34:34
【问题描述】：

我想在 Angular2 或 Angular4 中调用内联 Javascript 函数。

以下是我的示例代码。

*.html

<div id="demo" onload="myfunction()"></div>

<script>
  function myfunction() {
console.log("working");
   var map = new AMap.Map("map", 
     { resizeEnable: true, 
      center: [latitude, longitude], 
      zoom: 8
     }); 
}
</script>

这是正确的方法吗？这现在不起作用。

我正在使用 Amap.map API。我认为它不会支持 Angular2。如果它支持，我将照常调用组件中的 typescript 函数。现在我想在视图中绑定地图。所以我需要广告这个

var map = new AMap.Map("map", 
 { resizeEnable: true, 
   center: [latitude, longitude], 
   zoom: 8
 });

但由于无法导入“AMap”而出现错误

注意：由于第三方库，我应该尝试这样的东西（内联 javascript）。

【问题讨论】：

你为什么要做这样的事情？哪个第三方库要求您这样做？
你能介绍一下图书馆吗
请看更新后的问题
如果不导入 Angular，内联是否有效？
@CapeAndCowl：如果我在 component.html 中添加，它不会不起作用。但只有当我在 index.html 中添加相同的内容时它才有效

标签： angular angular2-routing angular2-template

【解决方案1】：

在 index.html 中将下面的行放在标签中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    
</script>

它将在您的项目中包含 JQUERY。然后在 tyescript 文件中您可以根据您的要求包含您的逻辑

例如：

在组件的 html 文件中

<div id="demo"> 
    <!-----Code-------->
 </div>

在组件的打字稿文件中

 ngOnInit(){
      $(document).ready(function () {
          $('#demo').load(() => {
              // Your function Body
              console.log("working");
              var map = new AMap.Map("map", 
               { resizeEnable: true, 
                  center: [latitude, longitude], 
                  zoom: 8
                }); 
          })
       }
 }

如果您在添加 jquery 库时遇到任何问题，还有其他方法可以使用它。

【讨论】：

其实问题出在高德地图上。我无法导入它。现在我按照你的建议尝试了。得到“找不到名称'AMap'。” .如果我成功导入它，那么我可以在没有 jQuery 的情况下直接制作它。

【解决方案2】：

See this resource that is telling you:

几乎所有的 HTML 语法都是有效的模板语法。 <script> 元素是一个明显的例外；禁止，消除风险脚本注入攻击。在实践中，<script> 被忽略并且警告出现在浏览器控制台中。

【讨论】：

【解决方案3】：

要导入 javascript 文件，您可以将它们包含在项目的 angular-cli.json 文件中的 scripts 数组中。包括 jQuery、AMap js 文件和自定义脚本来调用/初始化 AMap。

【讨论】：

嗯..如果你能包括例子会很棒。