angular - 在 Angular 5 中动态注入(inject)和使用 javascript 代码

Question

我从事项目工作将近一年，从 rc 版本开始我们就在使用 Angular 2。目前我们已经是第 5 版了。

我们的应用程序需要从注入(inject)的 typescript 中转译 javascript 代码并能够使用它。

想象一下:我可以创建一个带有页面的应用程序，每个页面都有控件，然后每个控件都有一个 ID； (我们已经有了)我创建了一个脚本，可以向这些控件添加行为。诸如用户在控件内单击或更改事件之类的事情。如果我在该点击事件的脚本和事件中，我会执行其中的内容。

所以我的应用程序创建了一个“应用程序”，这个应用程序有控件和一个脚本文件，可以监听来自应用程序的事件。

在脚本中，我必须注册控件并将事件分配给它，就像我们通常在 Javascript 中所做的那样。

例如，我会有一个本地 api，我也会注入(inject)它，以便该应用程序可以重用一些常用功能，下面是该应用程序的脚本:

var myPage = myApp.Page("myPageID");
myPage.registerControls('txt1', 'txt2');

myPage.txt1.Events.Click(myClickFunction);

function myClickFunction(sender, event) {
 //Do something here
}

所以当我在我的应用程序中打开这个应用程序时，脚本会在我打开应用程序时注入(inject)，并在我关闭时删除。

有什么办法可以实现吗？

我仍在尝试找到一种 JSFiddler，我可以在其中添加 typescript 代码并将结果转译导出到文件，以便在我打开应用程序时将其注入(inject)。

Answer 1

使用 OpaqueToken，我们可以将第三方 javascript 库作为服务注入(inject)，并可以与组件一起使用。

例如，我正在使用“toastr”库来显示消息。以下是步骤。

1- 在 index.html 中包含库引用。

<script src="node_module/toastr/build/toastr.min.js"></script>

2- 创建一个将在 AppModule 中注册全局服务时在依赖注入(inject)注册表中使用的 token 。

toastr.service.ts:

import { OpaqueToken } from '@angular/core';

export let Toastr_TOKEN = new OpaqueToken('toastr');

3- 在 AppModule 中注册。

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }         from './app.component';
import { ParentComponent }   from './parent.component';

import { Toastr_TOKEN } from './toastr.service'

declare let toastr:any; //a globall toastr object

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [
    AppComponent,
    ParentComponent,
  ],
  providers: [
    { provide: Toastr_TOKEN, useValue: toastr }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

4- 使用@Inject 装饰器，在组件内部使用 toastr 对象。

import { Component, Inject } from '@angular/core';
import { Toastr_TOKEN } from './toastr.service';

@Component({
  selector: 'parent',
  template: `
    <button class="btn btn-primary" (click)="displayMessage()">Display #</button>

  `
})
export class ParentComponent implements OnInit {
  prime;

  constructor(@Inject(Toastr_TOKEN) private toastr) {

  }

  displayMessage() {
    this.toastr.success('Hello');
  }


}