Question

我有以下情况。

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

代码：

export class MyService{
    public editProjectDone = new Subject<string>();
}

app.module.ts
{
    ...providers: [MyService]
}

app.component.html
<button (click)="editProject()">Edit project</button>

app.component.ts
function editProject(){
    ... load Javascript file
    call javascript file
    js.editProject("projectId") // call function defined in javascript file
}

javascript file
{
    function editProject(projectId)
    {
        //do calculation 
        // fire event that calculation is done
        // the calcuation is not done in typescript, but here
        MyService.editProjectDone.next() 
        // The question is here how to access the event and fire it
    }
}

Answer 1

因此您想访问 javascript 函数A()中的角度服务方法。

例如：

您的服务等级：

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

您的JavaScript文件

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

解决方案： 自定义事件 。

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

app.component.html：

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

app.component.ts

constructor(private settings: SettingsService){}

logclick(event){
    // define custom event
    var customevent = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
            myservice: this.settings //passing SettingsService reference
        },
        bubbles: true,
        cancelable: true
      }
    );
    event.target.dispatchEvent(customevent); //dispatch custom event
}

javascript文件：

// 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文件的部分。我认为您已经可以通过评论来做到这一点。

Answer 2

使用window对象但以适当的方式将变量声明为公共变量。仅导出某些功能而不是整个服务，并且以如下所示的某些标准方式导出。

在Angular中

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
  }
}

使用Java语言

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

Answer 3

您必须使用服务变量来访问功能和特定服务的变量。

我在这里演示您如何做到这一点。

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

此处提供完整代码：https://stackblitz.com/edit/angular-services-example

Answer 4

首先，您需要在调用服务之前导入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中访问Angle 2+中的服务

4 个答案: