如何在angular 2+；可在javascript中访问

我有下面的场景

我有一个简单的angular 2应用程序，其中包含一项服务，我将其添加到app.module中的提供者。当我点击一个按钮时，应用程序应该加载一个javascript文件并执行一个函数，例如这个javascript文件中定义的函数。所以问题是如何访问函数A中的服务。我考虑的是将服务附加到全局窗口变量。 有没有更好的方法来实现它

代码：

导出类MyService{
public editProjectDone=新主题（）；
}
app.module.ts
{
…提供商：[MyService]
}
app.component.html
编辑项目
app.component.ts
函数editProject（）{
…加载Javascript文件
调用javascript文件
js.editProject（“projectId”）//调用javascript文件中定义的函数
}
javascript文件
{
功能编辑项目（projectId）
{
//计算
//完成计算的火灾事件
//计算不是用typescript完成的，而是在这里
MyService.editProjectDone.next（）
//这里的问题是如何访问事件并启动它
}
}

您必须使用服务变量来访问特定服务的函数和变量

在这里，我将演示如何做到这一点

export class AppComponent  {
  name = 'Angular';
  constructor(private myServices: MyServices){
     this.myServices.sayHello();
  }
}

---

此处提供的全部代码：

首先，您需要在调用服务之前导入js文件，这可以通过以下方式完成：

TS

let js: any = require('JSFileNAME')['default']; //Something lik this in constructer

然后，导入文件后，您需要在Ts中创建js的实例化 差不多

this.newObjectOfJs = new js(); // pass any paramater if its required.

---

此后，您将能够从JSfile访问方法和服务。

因此您希望在javascript函数

A（）

中访问角度服务方法

例如：

您的服务类别：

export class SettingsService{
    getLanguage() {
        return 'en-GB';
    }
}

<input type="button" value='log' (click)="logclick($event)">

// event handler function
function newMessageHandler(e) {
    console.log(
        "Event subscriber on "+e.currentTarget.nodeName+", "
        +e.detail.time.toLocaleString()+": "+e.detail.message
    );
    //calling SettingsService.getLanguage()
    console.log(e.detail.myservice.getLanguage());
}
//adding listener to custom event.
document.addEventListener("newMessage", newMessageHandler, false);

Event subscriber on #document, 9/11/2018, 11:31:36 AM: Hello World!
en-GB

您的javascript文件

function A() {
    settingsService.getLanguage();
}

---

解决方案：自定义事件

基本上，您可以在javascript文件中定义自定义事件处理程序。并在Angular click Event函数中定义自定义事件和dispatchEvent自定义事件

app.component.html:

export class SettingsService{
    getLanguage() {
        return 'en-GB';
    }
}

<input type="button" value='log' (click)="logclick($event)">

// event handler function
function newMessageHandler(e) {
    console.log(
        "Event subscriber on "+e.currentTarget.nodeName+", "
        +e.detail.time.toLocaleString()+": "+e.detail.message
    );
    //calling SettingsService.getLanguage()
    console.log(e.detail.myservice.getLanguage());
}
//adding listener to custom event.
document.addEventListener("newMessage", newMessageHandler, false);

Event subscriber on #document, 9/11/2018, 11:31:36 AM: Hello World!
en-GB

javascript文件：

export class SettingsService{
    getLanguage() {
        return 'en-GB';
    }
}

<input type="button" value='log' (click)="logclick($event)">

// event handler function
function newMessageHandler(e) {
    console.log(
        "Event subscriber on "+e.currentTarget.nodeName+", "
        +e.detail.time.toLocaleString()+": "+e.detail.message
    );
    //calling SettingsService.getLanguage()
    console.log(e.detail.myservice.getLanguage());
}
//adding listener to custom event.
document.addEventListener("newMessage", newMessageHandler, false);

Event subscriber on #document, 9/11/2018, 11:31:36 AM: Hello World!
en-GB

示例输出：

export class SettingsService{
    getLanguage() {
        return 'en-GB';
    }
}

<input type="button" value='log' (click)="logclick($event)">

// event handler function
function newMessageHandler(e) {
    console.log(
        "Event subscriber on "+e.currentTarget.nodeName+", "
        +e.detail.time.toLocaleString()+": "+e.detail.message
    );
    //calling SettingsService.getLanguage()
    console.log(e.detail.myservice.getLanguage());
}
//adding listener to custom event.
document.addEventListener("newMessage", newMessageHandler, false);

Event subscriber on #document, 9/11/2018, 11:31:36 AM: Hello World!
en-GB

---

注意：我没有添加动态加载javascript文件的部分。我假设您已经能够从您的评论中做到这一点。

使用

窗口

对象将变量声明为public，但方式正确。仅导出某些功能，而不是整个服务，并以以下标准方式导出

角度的

export class AbcService {
  constructor() {
    const exportFunctions = {
      xyzFunction: this.xyzFunction.bind(this),
      pqrFunction: this.pqrFunction.bind(this)
    }; // must use .bind(this)
    window['ngLib']['abcService'] = exportFunctions;
  }

  xyzFunction(param1, param2) {
    // code
  }

  pqrFunction() {
    // code
  }

  private oneFunction() {
    // code
  }

  private twoFunction() {
    // code
  }
}

Javascript中的

ngLib.abcService.xyzFunction(value1, value2);
ngLib.abcService.pqrFunction();

---

未清除有关Javascript文件的信息？？？？你的意思是typescript？？？嗨，Raj，你可以在angular 2应用程序中加载外部javascript文件并执行其中定义的函数。你是否尝试在angular中调用js？是的，我知道如何在angular中调用js函数，但我想访问angular应用程序的服务（提供者）Orry，我没有尝试过这个方法，我想达到相反的目的。从javascript函数调用angular 2应用程序的服务。需要了解您的代码和项目结构。任何代码都会有帮助的。我只是添加了一些代码来让我的问题更清楚。嗨，j4rey。你的回答似乎对这个案子是正确的。我有另一个场景，当我加载外部html文件并通过设置innerHtml来呈现它时。在这种情况下，外部html是一个按钮。当我点击按钮时，会调用一个javascript函数。在该功能中，我想访问angular应用程序的服务。在这种情况下如何实现？如果问题不清楚。我将用code.AngularChan创建另一个问题，正如j4rey所说，我同意更好的解决方案是使用自定义事件，而不是全局变量。对于这种情况，您也可以从btn click函数发送自定义事件，您的angular服务正在监听此事件，当angular服务中的侦听器收到此事件时，创建另一个自定义事件，如@j4rey said，其余的将如j4rey代码。希望能有帮助。我理解你的想法，但我有两个问题。1） 如何从angular或javascript加载和设置外部html？2） 单击功能在哪里定义？可以在

ts

文件本身中定义吗？我通过http.get请求获取html模板字符串，并将角度组件的innerHtml设置为。我知道外部javascript文件的路径，并通过$.getScript加载它。当我单击html模板的按钮时，应该调用javascript中的函数。因此，场景是html模板，javascript内容对angular来说是未知的。但是javascript函数应该能够从angular应用程序调用服务。