Appel de la pure fonction javascript à partir Angulaire 2 composants

J'ai un fichier qui ont des dizaines de fonctions javascript. Ce que je veux faire est d'importer ce fichier dans Angulaire 2 composant et exécuter fonction init() est définie dans "external.js" fichier.

import { Component, AfterViewInit } from '@angular/core';

import "../../../../assets/external.js";

@Component({
    selector: 'app-component',
    templateUrl: 'app.component.html'
})
export class ComponentNameComponent implements AfterViewInit {
    constructor() { }

    ngAfterViewInit(): void {
      //invoke init() function from external.js file
    }
}

external.js est chargé à l'aide d'importation et d'en ngAfterViewInit() je veux invoquer la fonction init() qui est en external.js qui appelle toutes les autres méthodes dans le fichier externe.

Ici une partie de external.js:

function init() {
  callFunction1();
  callFunction2();
}
InformationsquelleAutor Haris Hajdarevic | 2016-11-16
  1. 39

    Vous permet d'importer et de déclarer votre objet externe. après que vous pouvez utiliser dans votre composant.

    import 'external.js'
declare var myExtObject: any;

    J'ai fait un exemple dans plunker:
    https://plnkr.co/edit/4CrShwpZrDxt1f1M1Bv8?p=preview

    Espère que cette aide.

    • J'ai suivi votre exemple. J'ai créé var webGlObject = (function() { return { init: function() { init(); } } })(webGlObject||{}) et dans ngAfterViewInit() a tenté d'accéder à ` webGlObject.init ();", mais j'obtiens une erreur errors.service.ts:29 ReferenceError: webGlObject is not defined
    • J'ai mis à jour plunker avec votre webGlObject et il est de travail. Seule chose que j'ai changé, c'est que vous appelez la fonction init() dans la fonction init.
    • si vous obtenez une erreur pourrait vous fournir plus d'informations ou de créer, par exemple, dans plunker, jsfiddle ou autre chose?
    • le problème était que mon script external.js a été importé sur le chemin que j'ai décrit ci-dessus. Je le déplacer à index.html et l'inclure via <script> balise d'en-tête.Après qu'il a commencé à travailler.Merci @hakany
    • Ce script semble s'exécuter lorsque vous déplacez le fichier js à index.html. Mais le navigateur se plaint encore ReferenceError: webGlObject is not defined. La solution pour moi a été l'ajout de tous les fichiers JS sous scripts dans angular-cli.json
    • J'ai suivi votre exemple. - Je recevoir TypeError: pm.le chargement n'est pas une fonction. Le chargement est, fondamentalement, vous func1 de plnkr exemple.
    • Dans angulaire 4 et 5, vous pouvez importer le code javascript à l'aide: importer {nom de fichier} '../file/location/filename.js';
    • plunker unpkg.com les références ne sont plus là (404).
    • plunker est mis à jour
    • plunker ne fonctionne pas

    InformationsquelleAutor hakany
  2. 4

    La caisse de mon projet git angulaire 6 - j'ai utilisé ce en composant login -

    https://github.com/gajender1995/Angular-HighChart-Auth

    exter.js

    define(["require", "exports"], function(require, exports){
   exports.value = "aaa";
   exports.gajender = function(){console.log(2)}; 
});

    de connexion.composante.ts

     import * as MyModule from './exter.js';

 console.log('my value is', MyModule.gajender());

    Dans tsconfig Ajouter

    "allowJs": true
    • merci beaucoup
    InformationsquelleAutor Gajender Singh