Есть ли другой способ включить Jquery lib для связи между Angular и этой библиотекой? - PullRequest
0 голосов
/ 14 февраля 2019

Мне пришлось включить некую библиотеку под названием RappidJS и множество файлов Jquery в проект Angular 7.Я использовал самодельную функцию, чтобы сделать это в своем компоненте:

ngOnInit() {
        this.loadScript('./app/assets/node_modules/jquery/dist/jquery.js');
        this.loadScript('./app/assets/node_modules/lodash/index.js');
        this.loadScript('./app/assets/node_modules/backbone/backbone.js');
        this.loadScript('./app/assets/build/rappid.min.js');
        this.loadScript('./app/assets/src/joint.ui.inspector.min.js');
        this.loadScript('./app/assets/src/joint.shapes.qad.js');
        this.loadScript('./app/assets/src/selection.js');
        this.loadScript('./app/assets/src/factory.js');
        this.loadScript('./app/assets/src/snippet.js');
        this.loadScript('./app/assets/src/app.js');
        this.loadScript('./app/assets/src/index.js');
}

public loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
}

JS выполняется нормально, и мое приложение отображается без проблем.Однако мне нужно связаться с некоторыми функциями в "app.js", чтобы извлечь json и использовать его в моем угловом приложении.

В моем component.html у меня есть панель инструментов:

  <div id="toolbar">
            <button class="btn btn-secondary add-question">Ajouter Question</button>
            <button class="btn btn-secondary add-answer">Ajouter Réponse</button>
            <button class="btn btn-secondary add-API">Ajouter module API</button>
            <button class="btn btn-success add-APIEX">Ajouter module Ping</button>
            <button class="btn send-json">Envoyer JSON</button>
            <button class="btn btn-secondary preview-dialog">Lancer dialogue</button>
            <button class="btn btn-secondary code-snippet">Code Snippet</button>
            <button class="btn btn-secondary clear">Effacer Tableau</button>
            <button class="btn btn-secondary load-example">Charger le JSON</button>
        </div>

and in app.js i have this : 

events: {
    'click #toolbar .add-question': 'addQuestion',
    'click #toolbar .add-API': 'addAPI',
    'click #toolbar .add-APIEX': 'addAPIEX',
    'click #toolbar .add-answer': 'addAnswer',
    'click #toolbar .send-json': 'sendJson',
    'click #toolbar .preview-dialog': 'previewDialog',
    'click #toolbar .code-snippet': 'showCodeSnippet',
    'click #toolbar .load-example': 'loadExample',
    'click #toolbar .clear': 'clear'
},

sendJson: function () {}

Я действительно хотел бы знать, есть ли способ связи между ними?

Спасибо

...