Come caricare il file di script dal componente html?

Question

Fondamentalmente volevo caricare il file di script specifico del componente html, in modo che script inserissi il codice di riferimento script all'interno del componente stesso, sto vedendo che il file interno script è stato ignorato durante il rendering del componente html sulla pagina.

Componente

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> 

Sopra è il mio codice quello che ho cercato & ho già test.js lì al suo posto.

Plunkr Here

C'è un modo per caricare file JavaScript specifico componente componente o con la sua html?

Answer 1

Working Plunker

Security

Sembra angolare tira fuori i tag script da modelli HTML.

Dal Angular Docs:

Rimuove il <script> tag, ma mantiene il contenuto di sicurezza, come ad esempio il contenuto del testo del tag <script>

angolare fornisce metodi per bypass security, ma per l'uso caso sembra che un servizio sarebbe utile.

Servizi

Il modo migliore per inserire il tuo script personalizzato nel componente da un file separato dedicato potrebbe essere quella di creare un service.

ho preso il codice dal file script.js del Plunker e metterlo in un servizio come questo:

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

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

Poi ho importato il servizio e chiamato il codice personalizzato in questo modo:

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

Ganci ciclo di vita

Se si desidera chiamare il codice personalizzato del servizio in un punto specifico, è possibile utilizzare lifecycle hooks. Ad esempio, è possibile chiamare il proprio codice utilizzando ngAfterViewInit() anziché ngOnInit() se si desidera attendere fino a quando la vista non è stata caricata.