在Angular 5中动态注入和使用javascript代码

我在这个项目中工作了将近一年，我们使用Angular 2，因为它是rc版本。目前我们已经在版本5中了

我们的应用程序需要从注入的typescript传输javascript代码并能够使用它

想象一下： 我可以创建一个应用程序，每个页面内有页面，每个页面都有控件，然后每个控件都有一个ID；（我们已经有了这个） 我创建了一个脚本，可以将行为添加到这些控件中。例如，当用户在控件内单击或更改事件时。如果脚本和事件中包含了该单击事件，我将执行其中的内容

因此，我的应用程序创建了一个“应用程序”，该应用程序具有控件和一个脚本文件，用于侦听来自该应用程序的事件

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

例如，我将有一个本地api，我也将注入该api，以便应用程序可以重用一些常用函数，下面是应用程序的脚本：

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

myPage.txt1.Events.Click(myClickFunction);

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

因此，当我在应用程序中打开此应用程序时，脚本将在我打开应用程序时注入，并在我关闭应用程序时删除

有没有办法做到这一点

---

我仍在尝试寻找一种JSFiddler，在其中我可以添加typescript代码，并将结果传输到文件，以便在打开应用程序时将其注入。

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

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

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

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

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-使用@injectdecorator，在组件内使用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');
  }


}

从'@angular/core'导入{Component，Inject}；
从“/Toastr.service”导入{Toastr_令牌}；
@组成部分({
选择器：'父'，
模板：`
展示#
`
})
导出类ParentComponent实现OnInit{
首要的
构造函数（@Inject（Toastr_令牌）私有Toastr）{
}
displayMessage（）{
这个.toastr.success（'Hello'）；
}
}

我正在做的应用程序是dinamic表单，因此对于每个表单，我都有一个与之关联的JavaScript文件，我无法预测名称等等。在创建之前。我无法注册opaqueToken，因为需要dinamic。我需要一件事，我可以加载JavaScript文件，并能够使用它的功能。

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');
  }


}