구성 요소 html에서 스크립트 파일을로드하는 방법은 무엇입니까?

Question

기본적으로 구성 요소 html 특정 스크립트 파일을로드하려고하므로 scriptscript 파일 참조를 구성 요소 html 자체에 넣으려고합니다. 페이지에서 구성 요소 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 Here

구성 요소 또는 HTML을 구성 요소 별 자바 스크립트 파일을로드 할 수있는 방법이 있습니까? 각도는 HTML 템플릿에서 스크립트 태그를 취처럼

Answer 1

Working Plunker

보안

는 것 같습니다. 에서

Angular Docs : 그것은 <script> 태그를 제거하지만 안전 내용을 보관하는 등

각도가 bypass security에 방법을 제공하는 <script> 태그의 텍스트 내용으로,하지만 사용

서비스가 도움이 될 것 같은 경우.

서비스

선호되는 방법은 service을 생성하는 것입니다 별도의 전용 파일의 구성 요소에 사용자 정의 스크립트를 포함합니다.

나는 당신의 Plunker의 script.js 파일의 코드를 가져다가이 같은 서비스에 넣어 :

// 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(); 
    } 
} 

: 나는 서비스 수입과 같은 사용자 지정 코드라고 그런

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

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

라이프 사이클 후크

특정 지점에서 서비스의 사용자 지정 코드를 호출하려면 lifecycle hooks을 이용할 수 있습니다. 예를 들어보기가로드 될 때까지 기다리려면 ngOnInit() 대신 ngAfterViewInit()을 사용하여 코드를 호출 할 수 있습니다.