Köşeli 2 - harici js kitaplıkları ile yazı tipi işlevlerinin iletişimi

Question

Grafik ve ağaç çizimi için harici bir kitaplık olarak Javascript Infovis Toolkit'u kullanın. Sunucuya bir HTTP GET isteği eşzamansız olarak göndermek ve sunucudan gelen verileri bir Açısal hizmet sınıfının özelliklerine ve değişkenlerine atamak için onClick düğüm yöntemini kullanmam gerekir. Tüm derlenmiş kod çizelgelerini tek bir js dosyasına paketlemek için webpack'i kullanarak, çıktı dosyası kafa karıştırıcı ve okunamaz durumdadır. Bu yüzden, bir harici js kütüphanesinden derlenmiş js dosyasındaki bir işlevi çağırmak en iyi çözüm değildir.

Ben bu yüzden herhangi bir sorun olmadan bu hizmetin özelliklerine erişebilirsiniz benim Açısal hizmet içi aşağıdaki çözümü deneyin:

document.addEventListener('DOMContentLoaded', function() { 
 
    
 
    var nodes = document.querySelectorAll(".nodes"); // nodes = [] 
 
    
 
    for (var i = 0; i < nodes.length; i++) { // nodes.length = 0 
 
    
 
    nodes[i].addEventListener("click", function() { 
 
     
 
     // asynchronously sending GET request to the server 
 
     // and assing receiving data to the properties of this Angular service 
 
     
 
    }); 
 
    } 
 

 
});

Ancak bu çözüm çünkü çalışmıyor Javascript Infovis Toolkit düğümleri DOM oluşturulmasını bitirdikten sonra ve ayrıca window.onload olayından sonra çizilir. Bu kitaplık, çizim ağacının tamamlanmasından sonra çağrılan onAfterCompute() gibi bazı yaşam döngüsü yöntemlerine sahiptir. Angular hizmetini ağaç çizimi tamamlandığını bildiren ve tüm düğümleri sorgulayabilen global bir olayı nasıl tetikleyebilirim?

Answer 1

Sadece dispatchEvent kullanarak özel bir olayı tetikleyin. Eğik olarak

aslında DOM eklenir herhangi bir bileşeni eklenerek dinleyebilirsiniz: Herhangi şablonda

• :

<div (window:custom-event)="updateNodes($event)"> 

• veya bileşenler sınıfta :

@HostListener('window:custom-event', ['$event']) 
updateNodes(event) { 
    ... 
} 

• veya @Component() veya @Directive() ek açıklamada:
custom-event gönderilen olay türüdür ve updateNodes(event) sizin bileşenleri sınıfta bir yöntemdir

@Component({ 
    selector: '...', 
    host: {'(window:custom-event)':'updateNodes($event)'} 
}) 

.

elle JavaScript onu tetiklemek için: mevcut

window.dispatchEvent(new Event('custom-event')); 

bileşenlerin yöntemleri (veya direktifler, hizmetler) yapmak olacaktır alternatif bir yaklaşım dışında Açısal gibi Angular2 - how to call component function from outside the app açıklanmıştır.