普通 Javascript 作为 Angular 2 服务 [英] Plain Javascript as Angular 2 service

问题描述

我需要在 Angular 2 组件中添加托管的第三方 JavaScript 文件.此文件会在关联的第三方供应商专有系统中发生更改时更新，因此我不能简单地拉下副本，将其包含在本地，然后将其导入到项目中.

I need to add a hosted third-party JavaScript file in an Angular 2 component. This file is updated anytime a change is made in the associated third-party vendors proprietary system, so I cannot simply pull down a copy, include it locally, and import it into the project.

通常我会在脚本标签的顶层包含这个文件，然后简单地使用 declare <windowvar>: any 来访问它.但是在这种情况下，由于组件本身正在尝试加载脚本，因此我无法声明 window 变量，因为在加载组件时它不存在于 window 对象上，从而产生错误.

Typically I would include this file at a top level in a script tag, and then simply use declare <windowvar>: any to get access to it. However in this case, since the component itself is trying to load the script, I cannot declare the window variable because it does not exist on the window object at the time the component is loaded, which generates an error.

我可以通过手动添加脚本标签来加载脚本，这有效，但是我需要访问它创建的窗口变量才能正确使用它.而且我不能简单地使用间隔来查找它，因为打字稿会抛出 <windowvariable>对象窗口上不存在.

I can load the script by manually adding a script tag, and that works, however I need access to the window variable it creates in order to use it properly. And I cannot simply use an interval to look for it because typescript throws a fit that <windowvariable> does not exist on object window.

有什么办法可以 1) 在组件内加载托管的 JavaScript 文件，以及 2) 访问由加载的 JavaScript 文件创建的窗口变量?

Is there any way I can 1) Load the hosted JavaScript file inside the component, and 2) Get access to the window variable created by the loaded JavaScript file?

推荐答案

更新 1:根据评论，之前的解决方案对您没有帮助.

Update 1: Based on the comments, the previous solution will be not help you.

您可以使用 Angular2 中的 OpaqueToken

You can do that by using OpaqueToken in Angular2

1.在单独的 ts 文件中创建一个用于查找实例的令牌，如下所示.

1. Create a Token that is used to find an instance as below in a separate ts file.

import { OpaqueToken } from '@angular/core'

export let name_of_The_Token = new OpaqueToken('name_Of_The_Window_Object');

2.在您的App.module中，您需要导入并声明一个变量，它是您的窗口对象的名称，它使令牌作为 angular2 服务，以便您可以跨组件使用该 javascript 文件中的属性和方法.

2. In your App.module, you need to import and declare a variable that is the name of your window object which makes the Token as a angular2 service so that you can use properties, methods in that javascript file across your components.

import { name_of_The_Token } from '/* file_Path */';
declare let name_Of_The_Window_Object : any;  //below your import statements

第 3 步:注入到你的模块的 providers 数组中.

Step 3: Inject it to providers array of your module.

{ provide : name_of_The_Token , useValue : name_Of_The_Window_Object }

在组件中使用此令牌的指南

Guidance to use this token in components

1. 像任何其他服务一样导入令牌，并从 angular-core 中@Inject

1. Import the token just like any other service and @Inject from angular-core

 import { name_of_The_Token } from '/* file_Path */';
 import { Inject } from '@angular/core';

在组件的构造函数中

In constructor of the component

 constructor(@Inject( name_of_The_Token ) private _serviceObject : any )       

您可以在组件中的任何位置使用 javascript 文件的变量和方法作为

Any where in your component you can use the variables and methods of your javascript file as

 this._serviceObject.method1()
 this._serviceObject.variable1
 .....

注意:一个缺点是您将无法获得智能感知.

克服它:如果您正在寻找智能感知，您需要将方法和变量包装在接口内，并在您的令牌的类型**(而不是任何)** 中使用它作为

Overcoming it: If you are looking for intellisense you need to wrap the methods and variables inside an interface and use it in the type**(instead of any)** of your token as

export interface myCustom {
      method1(args): return_Type;
      method2(args): void;
      .....
   }

现场演示 ToasterService

LIVE DEMO of ToasterService

这篇关于普通 Javascript 作为 Angular 2 服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！