普通 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
像任何其他服务一样导入令牌,并从 angular-core 中@Inject
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屋!