Comment appeler des fonctions JavaScript à partir de Typescript dans Angular 5?

Question

Je suis en train de travailler sur la Visionneuse PDF de développement dans Angulaire 5. J'en ai fini avec l'écriture du code HTML pour l'INTERFACE utilisateur de la partie. Maintenant, j'ai des fichiers JavaScript qui fournissent des fonctionnalités pour les éléments d'INTERFACE utilisateur. Comme Angulaire 5 prend en charge la copie dactylographiée de la mise en œuvre de la fonctionnalité des composants d'INTERFACE, je veux inclure des fichiers JavaScript dans Angulaire du Projet et de les appeler à partir de mon Tapuscrit code.

Questions:

1. Comment et où pour y inclure des Fichiers JavaScript dans Angulaire du Projet?
2. Comment appeler les Fonctions JavaScript de Tapuscrit de classe?

Il serait génial si quelqu'un me fournit un exemple !!

Merci à l'Avance!!

Answer 1

1. Comment et où pour y inclure des Fichiers JavaScript dans Angulaire du Projet?

Vous devez inclure votre JS fichier dans l' actif de dossier et de consulter ce fichier JS dans .angulaire de la cli.json fichier.

Consultez la capture instantanée,

Structure de dossier devrait ressembler à ceci.

.angulaire de la cli.json

2. Comment appeler les Fonctions JavaScript de Tapuscrit de classe?

votre TS devrait ressembler à ceci.

myJsFile.js contenu du fichier.

Cet exemple de logique mentionnés ci-dessus ne fonctionne, j'ai essayé et testé à l'aide de la version 4, Donc je m'attends à ce qu'il fonctionne avec la version 5 également.

Veuillez voir le dépôt GitHub (Angular8)

Answer 2

La réponse par Arun Raj R est parfait.

Mais pour l' angulaire 6+ projet vous devez prendre en angular.json au lieu de angular-cli.json.

aussi, si vous voulez passer des paramètres à l'intérieur de fonction externe qui viennent de fichier js que d'utiliser seulement function name.

Par Ex :

app.composante.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var myfunction: any; // just change here from arun answer.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
    constructor() { }

    ngOnInit() { 
        myfunction('test1', 'test2');
    }
};

yourJs fichier :

function myfunction(params1, params2) {
    console.log('param1', params1);
    console.log('param2', params2);
}