2016-04-22 14 views
5

Il sistema su cui sto lavorando consiste in un numero di microservizi distribuiti con potenzialmente più versioni di ciascun componente attive contemporaneamente.Caricamento di componenti dinamici da contenuto esterno

L'applicazione Angular2 che sto tentando di costruire deve essere in grado di interagire con ciascuno di questi componenti tramite websocket. Poiché non sembra possibile preparare questa applicazione per tutte le future versioni e caratteristiche di ciascun componente, l'implementazione del protocollo rispettivo e persino i nuovi componenti, vorrei spingere questa responsabilità ai componenti stessi.

Ogni componente è in grado di comunicare le sue capacità (nella forma di un componente NG2), nonché l'implementazione del protocollo e gli elementi della GUI necessari (HTML/CSS) tramite un pacchetto inviato tramite la stessa connessione web socket.

Esiste uno schema che abiliti questo tipo di "caricamento su richiesta" di componenti e relativi modelli in ng2?

+0

È possibile che ogni componente risieda sul proprio livello superiore della pagina (corpo), ciascuno come un'applicazione angolare indipendente affiancata che comunica solo tra loro o che deve essere annidato come i componenti effettivi. –

+0

Non è necessario che i componenti siano nidificati o interagiscano tra loro, ma dovrebbero essere in grado di condividere servizi e librerie. –

+1

Qualcosa come http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-component-in-angular-2/36566919?noredirect=1#comment60736661_36566919 funzionerebbe quindi credo. Non so come farlo con le applicazioni che vengono caricate in momenti diversi. Ad esempio, come fare in modo che un'applicazione trovi una classe di un altro dopo la minificazione quando i nomi vengono manomessi. –

risposta

1

Non sono abbastanza sicuro di comprendere appieno la tua domanda.

Esiste uno schema che abiliti questo tipo di "caricamento su richiesta" di componenti e relativi modelli in ng2?

Beh c'è on-demand-caricamento dei moduli, utilizzando moduli caricati pigri, si veda: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load mi raccomando di leggere tutta questa guida, è davvero utile.

ma dovrebbero essere in grado di condividere servizi e librerie.

La guida di Angulars suggerisce un modulo condiviso e un modulo di base per questo. In realtà penso che sia davvero il modo migliore per farlo. Basta scorrere verso il basso sul link qui sopra.

Ogni componente è in grado di comunicare le sue capacità (nella forma di un componente NG2) nonché l'implementazione del protocollo e gli elementi GUI necessari (HTML/CSS) tramite un pacchetto inviato attraverso la stessa connessione websocket.

Questa è la parte di cui non sono sicuro, come se non capissi se capisco correttamente cosa intendi. Non vuoi caricare un componente attraverso una connessione websocket giusto? Se è così, allora perché? Se si intende solo la comunicazione per ogni componente con lo stesso websocket: consiglierei un servizio che faccia parte del Core Module e quindi sia un Singleton. I componenti possono quindi accedere a questo servizio e quindi sono sempre connessi allo stesso websocket.

+1

Grazie per la risposta. Ho implementato un prototipo basato sulle risposte di bergben e kemsky. Sfortunatamente, non posso dividere la taglia in modo uniforme su entrambi i post. Un lancio di moneta ha deciso di dare la grazia a Bergen. –

2

Sembra che si possa provare a utilizzare il caricamento lazy del router e fornire un'implementazione personalizzata di NgModuleFactoryLoader che può caricare componenti tramite websocket.

+0

Potresti approfondire? –

+0

I moduli di funzionalità di caricamento lento sono funzionalità integrate del router, il caricamento può essere personalizzato fornendo l'implementazione di 'NgModuleFactoryLoader'. Quindi, se si desidera caricare i moduli utilizzando i socket Web, è necessario fornire un caricatore personalizzato. – kemsky

+0

NgModuleFactoryLoader prevede un metodo di caricamento (percorso: stringa) da implementare. Suggerisci di ricevere una stringa di feature_module.js compilata tramite websocket, salvarla in un file temporaneo, inserire il percorso dei file temporanei in un'implementazione NgModuleFactoryLoader personalizzata? –

0

Di seguito è possibile ottenere i passaggi.

  • uso systemjs caricatore per caricare componenti del router ``
  • nel file di configurazione systemjs specificare il percorso del componente

questi examples explans più in dettaglio.

Problemi correlati