如何从组件HTML加载脚本文件？

Question

我希望能够加载组件HTML特定的脚本文件，这样我就可以在组件HTML本身中放置script文件引用。但是在页面渲染组件HTML时，我发现内部的script文件被忽略了。

组件

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'test.html'
})
export class AppComponent { }

test.html

<div>
  <h1>My First Angular 2 App</h1>
</div>
<script src="test.js"></script>

以下是我尝试过的代码，我已经放置了 test.js。 点击这里查看 Plunkr 有没有办法在组件或其 HTML 中加载特定的 JavaScript 文件？

- Pankaj Parkar

Answer 1

可运行的 Plunker

安全性

Angular 似乎会从 HTML 模板中移除脚本标签。

根据 Angular 文档：

它会删除 <script 标签，但保留安全内容，例如 <script> 标签的文本内容

Angular 提供了绕过安全措施的方法bypass security，但对于你的用例来说，使用一个服务可能更有帮助。

服务

在组件中引入自定义脚本的首选方式是创建一个服务，并将脚本放在单独的文件中。

我将您的 Plunker 的 script.js 文件中的代码放入了一个服务中，如下所示：

// File: app/test.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
    testFunction() {
      console.log('Test');
    }
}

然后我导入了服务并像这样调用自定义代码：

// File: app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'my-app',
  templateUrl: 'test.html',
  providers: [TestService]
})
export class AppComponent implements OnInit {
  constructor(private testService: TestService) {}
  ngOnInit() {
    this.testService.testFunction();
  }
}

生命周期钩子

如果您想在特定时间点调用服务的自定义代码，您可以利用生命周期钩子。例如，如果您想等待视图加载完成后再运行代码，您可以使用ngAfterViewInit()而不是ngOnInit()。

- adriancarriger

---

这是针对第三方库的吗？如果是，你的问题可能类似于这个。 - adriancarriger

那不会是第三方代码，而是特定组件的纯JavaScript代码，每个组件都会有所不同。 - Pankaj Parkar

所以听起来你想在 Angular 2 项目中重用你的代码？如果你只是想让它工作，你可以把它放在 index.html 文件中，这样它就可以全局使用了，但你可能会错过一些 Angular 的模块化功能。另外，你也可以将你的代码重构为一个 Angular 2 模块 并将其导入到你的组件中。 - adriancarriger

如果我有一个像d3.js这样的大型库，我希望它只在需要它的组件加载时下载，该怎么办？ - kyw

@kyw 在AngularJS中集成D3的Angular方式是使用指令。您可以从创建一个名为“d3”的新模块开始：http://www.ng-newsletter.com/posts/d3-on-angular.html - Eugene Kardash