简单的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 即可访问它。但是在这种情况下，由于组件本身正在尝试加载脚本，因此我无法声明窗口变量，因为它在加载组件时不存在于窗口对象上，这会产生错误。
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.
我可以通过手动添加脚本标记来加载脚本，这样可行，但是我需要访问它创建的窗口变量才能正确使用它。而且我不能简单地使用间隔来查找它，因为typescript会抛出< 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.
您可以使用 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 中，你需要导入并声明一个变量，这是一个窗口对象的名称，它使Token成为一个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：将注入提供者数组您的模块。
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
-
导入令牌与任何其他服务一样，而@Inject来自angular-core
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
.....
注意：一个缺点是无法获得intellisense 。
克服它：
如果你正在寻找intellisense，你需要将方法和变量包装在一个接口中并在其中使用它您的令牌的类型**（而不是任何）**
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;
.....
}
LIVE DEMO of ToasterService
这篇关于简单的Javascript作为Angular 2服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
