Wie Skriptdatei von Komponente HTML laden?

Question

Grundsätzlich wollte ich Komponente html spezifische Skriptdatei laden, so dass script ich script Dateireferenz innerhalb Komponente html selbst setzen werde, sehe ich, dass innere script Datei wurde beim Rendern der Komponente HTML auf der Seite ignoriert.

Komponente

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> 

Oben ist mein Code, was ich & versucht, ich habe schon test.js dort an Ort und Stelle.

Plunkr Here

Gibt es eine Möglichkeit bauteilspezifische JavaScript-Datei mit der Komponente oder mit HTML zu laden?

Answer 1

Working Plunker

Sicherheit

Es sieht aus wie Angular Script-Tags von HTML-Vorlagen nimmt.

Von der Angular Docs:

Es entfernt die <script> -Tag, sondern hält sicher Inhalt, wie der Textinhalt des <script> Tag

Angular Methoden bypass security bietet, sondern auch für Ihre Anwendung Falls es aussieht, wäre ein Service hilfreich.

Dienstleistungen

Der bevorzugte Weg, um Ihre eigene benutzerdefinierte Skript in Ihrer Komponente aus einer separaten dedizierten Datei ein service zu erstellen wären aufzunehmen.

nahm ich den Code aus Ihrer script.js Datei Plunker und steckte es in einen Dienst wie folgt aus:

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

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

Dann importierte ich den Dienst und rief den benutzerdefinierten Code wie folgt aus:

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

Lebenszyklus-Hooks

Wenn Sie den benutzerdefinierten Code Ihres Service an einem bestimmten Punkt aufrufen möchten, können Sie die Vorteile lifecycle hooks nutzen. Zum Beispiel können Sie Ihren Code mit der ngAfterViewInit() anstelle von ngOnInit() aufrufen, wenn Sie warten möchten, bis die Ansicht geladen wurde.