在angular 5中调用javascript函数时发生引用错误

每当发生路由更改时，我试图在angular中调用from

.js

文件中的一个函数

这是我在javascript文件中的代码，我需要调用angular中的

appData

函数

console.log（parsedJsonResponse）的
console.log

和

console.log（appData）

工作正常，我得到了JSON响应

window.dataLayer = (function () {

  var dataCall = function () {
    return new Promise((resolve, reject) => {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            resolve(this.responseText);
          } else {
            console.log(this.status + '.....' + this.statusText)
          }
        }
      };

      xhttp.open("GET", "http://localhost:4200/assets/sample.json", true);
      xhttp.send();
    })

  }

  dataCall().then((CallResponse) => {
    getData(CallResponse)

  });

  window.addEventListener("load", function (event) {
    appData();
  })

  var getData = function (cData) {
    jsonResponse = cData.replace(/'/g, '"');
    parsedJsonResponse = JSON.parse(this.jsonResponse);
    var appData = parsedJsonResponse['content']['copy$$' + applicationContent];

    console.log(parsedJsonResponse);
  }

我正在调用中的

appData

函数

  var appData = function (applicationContent) {
    var appData = parsedJsonResponse['content']['copy$$' + applicationContent];
    console.log(appData)
  }

  return {
    appData: appData,
    dataCall: dataCall

  }

}())

这是我调用函数的代码

window.dataLayer = (function () {
   var parsedJsonResponse;
   // ...rest

在angular中调用此函数时，我得到的是

ReferenceError:parsedJsonResponse未定义

constructor(private router:Router) {}

 ngOnInit(){
  this.router.events
  .filter(event => event instanceof NavigationStart)
  .subscribe((event: NavigationStart) => {
    dataLayer.appData();
   })

 };

---

出什么事了？谢谢。

尝试在数据层函数中声明parsedJsonResponse变量：

window.dataLayer = (function () {
   var parsedJsonResponse;
   /* rest of your code */

编辑

问题是为什么会发生这种情况，因为当ajax响应来自服务器时，变量parsedJsonResponse会得到它的值。这意味着它依赖于异步操作。你能做的就是等待承诺的回应。我的建议是在新变量getAsyncData中遵守这一承诺：

var getAsyncData = dataCall().then((CallResponse) => {
  getData(CallResponse)
});

另外，不要忘记将该变量添加到返回对象中：

return {
  appData: appData,
  dataCall: dataCall,
  getAsyncData: getAsyncData
}

您可以在angular应用程序中使用它，如下所示：

dataLayer.getAsyncData.then(() => {
 dataLayer.appData();
});

我注意到的另一件事是，您正在getData函数中使用applicationContent，但它尚未在函数数据层中初始化。appData中该变量的唯一用法：

var appData = function (applicationContent) {

你也应该考虑在你的函数上面初始化这个变量。< /P>

window.dataLayer = (function() {
   var parsedJsonResponse;
   var applicationContent;
   /* rest of your code */

下面是代码，我在您的代码的基础上做了一些细微的更改（这里我将响应发送到jsonplaceholder服务器，因此解析该响应是不同的，并且我删除了load event listener：

---

parsedJsonResponse

如果要在不同的函数中使用变量，则应在所有函数之外声明该变量。否则，

parsedJsonResponse

是

getData

函数的专用变量

window.dataLayer = (function () {
   var parsedJsonResponse;
   // ...rest

接下来，您需要删除窗口加载事件内部的函数调用。

appData（）

在

window load

中被调用，但数据仍在提取，并且

parsedJsonResponse

没有内容

window.addEventListener("load", function (event) {
    // appData();
})

在

getData

函数中，删除

这个

，因为

jsonResponse

是一个私有变量

 parsedJsonResponse = JSON.parse(jsonResponse);

我希望这会有所帮助

编辑： 无论如何，我不鼓励使用外部js文件。试着在你的Angular应用程序中使用服务

更新： 您没有在

dataLayer.appData（）

中传递参数。

---

您没有正确处理API请求中的异常。

请检查：问题在于语句parsedJsonResponse=JSON.parse（this.jsonResponse）；你为什么在这里使用它？@Avij我用它来解析响应。该函数中的console.log也会返回响应。我已经做了这些更改。现在它给出了

Uncaught类型错误：无法读取
dataCall（）和
getData（）处未定义的
的“content”属性
。我这样做了，现在它给出了未捕获的TypeError：无法读取未定义的at dataCall（）和getData（）的“content”属性