Komut dosyası html bileşeninden nasıl yüklenir?

Question

Temel olarak, html bileşeninin bileşeni içinde script dosya referansını koyacağım, html özel komut dosyası bileşenini yüklemek istedim, sayfadaki bileşen html oluşturulurken iç script dosyasının göz ardı edildiğini görüyorum.

Bileşen

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> 

Üstü ben & çalıştı Ya benim kodudur Zaten yerinde orada test.js var.

Plunkr Here

bileşeni ile VEYA onun html ile bileşene özel javascript dosyasını yüklemek için herhangi bir yolu var mı? Eğik Html şablonlardan komut dosyası etiketleri alır gibi

Answer 1

Working Plunker

Güvenlik

görünüyor. Gönderen

Angular Docs: Bu <script> etiketini kaldırır, ancak güvenli içerik tutar, bu tür

Açısal bypass security için yöntemler sağlar <script> etiketinin metin içeriği olarak, ancak kullanımı için

Bir servis gibi görünüyor yardımcı olacaktır.

Hizmetler

tercih yolu service oluşturmak olacaktır ayrı adanmış dosyasından bileşeninde kendi özel komut dosyası dahil etmek.

Ben senin Plunker en script.js dosyadan kod aldı ve böyle bir hizmete koydu:

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

: Ben hizmet ithal ve bunun gibi özel kod denilen Sonra

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

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

Lifecycle kancaları

Hizmetinizin özel kodunu belirli bir noktada aramak istiyorsanız, lifecycle hooks'dan yararlanabilirsiniz. Örneğin, görüntü yüklenene kadar beklemek istiyorsanız, ngOnInit() yerine ngAfterViewInit() kodunu kullanarak kodunuzu çağırabilirsiniz.