2017-09-27 1 views
1

J'essaye d'afficher un diff pour deux objets JSON en vue Angular 4, j'utilise cette bibliothèque (angular-object-diff) initialement construite pour AngularJS .

Démo de cette bibliothèque: Link

J'ai essayé d'importer cette JS bibliothèque de la façon suivante:
fichier JS Je suis en train d'importer: angular-object-diff.js, ne marche pas avoir une variable exportée

Dans mon typings.d. ts (j'ajouté ce qui suit):Importer une bibliothèque Javascript spécifique dans Angular 4 (si la bibliothèque n'exporte pas une variable)

declare var ObjectDiff: any; 


Dans mon-cli.json angulaire, ajoutai-je

"scripts": [ 
    "../node_modules/angular-object-diff/dist/angular-object-diff.js" 
    ], 

Dans mon fichier de composant:

const json1 = { 
    name: 'John' 
}; 
const json2 = { 
    name: 'Johnny' 
}; 
const diff = ObjectDiff.diffOwnProperties(json1, json2); 
this.jsonViewData = ObjectDiff.toJsonDiffView(diff); 

À mon avis:

<pre ng-bind-html="jsonViewData"></pre> 
<pre> {{jsonViewData}}</pre> 

Rien ne semble fonctionner, je reçois l'erreur "ObjectDiff" n'est pas défini dans la console »

Quelqu'un peut-il s'il vous plaît laissez-moi savoir si je fais quelque chose de mal? Suggestions pour afficher les diff JSON sont également les bienvenus :)

** Merci

+0

Je ne pense pas que vous pouvez utiliser cette bibliothèque sans utiliser quelque chose pour rendre la bibliothèque angularjs compatible avec angular4. – toskv

+0

Oui, je l'ai. Merci @toskv. – Jarvis

Répondre

1

La bibliothèque n'exporte rien. Il utilise IIFE pour ne pas polluer la portée globale avec des variables locales. Il est impossible d'atteindre les variables locales de l'extérieur, ce qui rend le modèle Module si efficace (et ennuyeux).

La bibliothèque utilise AngularJS angular global et s'attend à ce qu'elle existe. Cela crée un problème, car l'application Angular 4 doit simuler angular global dans ce cas. De plus, le code lui-même repose sur des unités spécifiques à AngularJS (service $sce).

La bibliothèque doit être fourchue et modifiée pour répondre aux attentes. Les mentions angular doivent être supprimées. Considérant que le script sera exécuté dans la portée du module, IIFE doit être supprimé et les exportations appropriées doivent être ajoutées.

+0

Donne un sens, merci beaucoup @estus pour l'explication détaillée. – Jarvis

+0

De rien. Considérant que vous voudrez faire la même chose dans Angular 4, vous voudrez probablement remplacer $ sce par un https://angular.io/api/platform-browser/DomSanitizer similaire 'bypassSecurityTrustHtml'. – estus