Импортируйте определенную библиотеку Javascript в Angular 4 (если библиотека не экспортирует переменную)

Я пытаюсь показать разницу для двух объектов JSON в представлении Angular 4, я использую эту библиотеку (angular-object-diff), изначально созданный для AngularJS.

Демонстрация этой библиотеки: Ссылка

Я попытался импортировать эту библиотеку JS следующим образом:
Файл JS, который я пытаюсь импортировать: angular-object-diff.js, не имеет экспортируемой переменной

В моем typings.d.ts ( Я добавил следующее):

declare var ObjectDiff: any;


В свой angular-cli.json я добавил

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

В моем файле компонента:

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

С моей точки зрения:

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

Кажется, ничего не работает, я получаю сообщение об ошибке, что "ObjectDiff" не определен в консоли"

Может кто-нибудь, пожалуйста, дайте мне знать, если я делаю что-то неправильно? Также приветствуются предложения по отображению различий JSON :)

** Спасибо


typescript json angular typescript-typings
person Jarvis    schedule 27.09.2017    source источник
comment
Я не думаю, что вы можете использовать эту библиотеку, не используя что-то, чтобы сделать библиотеку angularjs совместимой с angular4.   -  person toskv    schedule 27.09.2017
comment
Да, понял. Спасибо @toskv.   -  person Jarvis    schedule 27.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Библиотека ничего не экспортирует. Он использует IIFE, чтобы не загрязнять глобальную область видимости локальными переменными. Невозможно получить доступ к локальным переменным извне, что делает шаблон модуля таким эффективным (и раздражающим).

Библиотека использует AngularJS angular global и ожидает, что она будет существовать. Это создает проблему, потому что в этом случае приложение Angular 4 должно имитировать angular global. Более того, сам код опирается на специфичные для AngularJS модули (служба $sce).

Библиотека должна быть разветвлена ​​и изменена в соответствии с ожиданиями. Упоминания angular должны быть удалены. Учитывая, что скрипт будет выполняться в области модуля, IIFE следует удалить и добавить соответствующие экспорты.

person Estus Flask    schedule 27.09.2017
comment
Имеет смысл, большое спасибо @estus за подробное объяснение. - person Jarvis; 27.09.2017
comment
Пожалуйста. Учитывая, что вы захотите сделать то же самое в Angular 4, вы, вероятно, захотите заменить $sce аналогичным angular.io/api/platform-browser/DomSanitizer bypassSecurityTrustHtml. - person Estus Flask; 27.09.2017