घटक एचटीएमएल से स्क्रिप्ट फ़ाइल कैसे लोड करें?

Question

असल में मैं घटक एचटीएमएल विशिष्ट स्क्रिप्ट फ़ाइल लोड करना चाहता था, ताकि script मैं घटक एचटीएमएल के अंदर script फ़ाइल संदर्भ डालने जा रहा हूं, मुझे लगता है कि पेज पर घटक एचटीएमएल प्रस्तुत करते समय आंतरिक 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

वहाँ घटक के साथ या इसके एचटीएमएल के साथ घटक विशिष्ट जावास्क्रिप्ट फ़ाइल लोड करने के कोई तरीका है?

Answer 1

Working Plunker

सुरक्षा

ऐसा लगता है कि कोणीय एचटीएमएल टेम्पलेट्स से स्क्रिप्ट टैग बाहर ले जाता है की तरह।

से

Angular Docs:

यह <script> टैग

कोणीय bypass security के तरीके प्रदान की पाठ्य सामग्री के रूप में <script> टैग निकाल देता है लेकिन सुरक्षित सामग्री रखता है, है, लेकिन अपने उपयोग के लिए अगर ऐसा लगता है कि एक सेवा की तरह मददगार होगा।

सेवाएं

पसंदीदा तरीका एक अलग समर्पित फ़ाइल से अपने घटक में अपने स्वयं के कस्टम स्क्रिप्ट शामिल करने के लिए एक service बनाने के लिए किया जाएगा।

मैं अपने 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(); 
    } 
} 

लाइफसाइकिल हुक

यदि आप किसी विशिष्ट बिंदु पर अपनी सेवा का कस्टम कोड कॉल करना चाहते हैं तो आप lifecycle hooks का लाभ उठा सकते हैं। उदाहरण के लिए यदि आप दृश्य लोड होने तक प्रतीक्षा करना चाहते हैं तो ngOnInit() के बजाय ngAfterViewInit() का उपयोग करके आप अपना कोड कॉल कर सकते हैं।