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

Question

基本上我想加载组件html特定的脚本文件,所以script我要把script文件引用放在组件html本身里面,我看到script在页面上渲染组件html时忽略了内部文件.

零件

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在这里

有没有办法加载组件特定的javascript文件与组件OR与其HTML？

Answer 1

工作的Plunker

安全

看起来Angular从Html模板中取出脚本标签.

来自Angular Docs:

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

Angular提供了绕过安全性的方法,但对于您的用例,它看起来像服务会有所帮助.

服务

从单独的专用文件中将自己的自定义脚本包含在组件中的首选方法是创建服务.

我从你的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()等待视图加载.