Uncaught ReferenceError: <function> is not defined - InnerHTML <script> tag with Angular答案

【问题标题】：Uncaught ReferenceError: <function> is not defined - InnerHTML <script> tag with AngularUncaught ReferenceError: <function> is not defined - InnerHTML <script> tag with Angular
【发布时间】：2018-10-24 13:51:23
【问题描述】：

我在 Angular 中有一个组件，其内容由提供 HTML 代码的后端提供。我将它作为内部 HTML 添加到组件中。提供的 HTML 中有一个和一个标记。但是，虽然我认为样式受到尊重，但我无法在脚本标签中调用该函数。

<script> 标签：

  function ToggleDisplayMode(node) 
    {
        var tableHeader = document.getElementById(node);
        if (null != tableHeader)
        {
            var row = tableHeader.nextSibling;
            while (row != null)
            {
                if ( row.style.display != "none" ) {
                    row.style.display = "none";
                }
                else {
                    row.style.display = "";
                }
                row = row.nextSibling;
            }
        }
    }

我如何调用这个函数：

<a onclick="ToggleDisplayMode(<args>)"><u>show/hide</u></a>

点击不起作用，我在控制台中得到以下输出：

> Uncaught ReferenceError: ToggleDisplayMode is not defined
>     at HTMLAnchorElement.onclick (<args>)

函数定义的很清楚，所以我不明白我在这里做错了什么。

我已经检查了几个关于这个问题的帖子，但它们是基于 JQuery 的。这是 Angular 如何处理内部 HTML 的问题吗？

编辑： 点击需要由 JavaScript 而不是 Angular 来处理（因为这个系统的特殊性），所以 ngClick 或 (click) 将不起作用。

编辑 2： 显然，innerHtml 中的<script> 标签不会根据this post 执行。届时将不得不找到另一种方法来做到这一点。

【问题讨论】：

您使用的是哪个版本的 Angular？ <args> 这里是什么？
这是一个设计怪癖，但是这个 HTML 是由我们拥有的 SDK 提供的，而 Angular 应用程序是在它之上构建的。相同的 HTML 用于许多其他客户端界面，因此我无法在那里进行更改。所以我不能使用ngClick
目前是Angular 4，而基本上是HTML中的节点ID。见函数第二行的var tableHeader = document.getElementById(node);。
如果您打开控制台并输入ToggleDisplayMode，它会返回任何内容吗？如果不是，则 ToggleDisplayMode 不在全局范围内
听起来你的函数不在全局范围内。

标签： javascript html angular innerhtml

【解决方案1】：

Angular 在组件的打字稿文件中查找代码，所以我认为您需要将代码放在那里。您可以创建一个服务来从后端获取代码，然后从您的打字稿文件中调用该服务并使用（单击）事件来调用打字稿代码。

【讨论】：

我没有使用ngClick，而是使用简单的JavaScript onclick，所以这里的点击不应该是Angular。
试试这个？ stackoverflow.com/questions/42530261/…
不能这样做，因为 ID 是动态的，并且多个地方使用相同的功能

【解决方案2】：

您需要像这样更改您的代码：

<a (click)="ToggleDisplayMode()"><u>show/hide</u></a>

请注意，您必须使用 (click) 而不是 onclick

【讨论】：

这是一个 Angular 解决方案 - 由于此 HTML 由 SDK 返回，并且在其他非 Angular 接口中使用相同的响应，因此无法在该级别进行更改

【解决方案3】：

Angular 版本 9.1.9 打字稿3.8.3

你可以在assets文件夹下添加一个js文件

src/assets/js/child2.js

function javaChangeCreatedBy() {
    alert('Set 2 clicked');

    var i_createdby = document.getElementById('inputcreatedbyid')
    var i_value = document.getElementById('inputcreatedbyid').value;
}

以下 html 代码显示了两种方法，一种用于角度单击，另一种用于 html onclick。

src/app/first-component/first-component.component.html

<p>
    Enter Created by:<input id='inputcreatedbyid' type="text" placeholder="Enter name" [(ngModel)]=inputcreatedby>
    &nbsp;
    <button type="button" (click)="ChangeCreatedBy(inputcreatedby)">Set</button> 
    &nbsp;
    <button type="button" onclick="javaChangeCreatedBy()">Set 2</button>
</p>

src/app/first-component/first-component.component.ts

 export class FirstComponentComponent implements OnInit {
      ..
      createdby = 'My name';
      inputcreatedby='';

      ChangeCreatedBy(inputcreatedby:string){
           // var inputvalue = document.getElementById("inputcreatedby").value;
           this.createdby = inputcreatedby;
      }
 }

最后将脚本文件添加到 angular.json 文件中

 {
    "projects": {
       "architect": {
           "build": {
              ..
              "options": {
                 ..
                 "scripts": [
                    "src/assets/js/child2.js"
                 ]
              }

然而 angular 不支持将类型脚本参数传递给 java 函数。

【讨论】：