0
2.8K
Views¿Cómo llamar a las funciones de JavaScript desde Typescript en Angular 5?
Estoy trabajando en el desarrollo de PDF Viewer en Angular 5. He terminado de escribir el código HTML para la parte de la interfaz de usuario. Ahora tengo archivos JavaScript que brindan funcionalidad para los elementos de la interfaz de usuario. Como Angular 5 admite mecanografiado para implementar la funcionalidad de los componentes de la interfaz de usuario, quiero incluir archivos JavaScript en Angular Project y llamarlos desde mi código de mecanografiado.
Preguntas:
- ¿Cómo y dónde incluir archivos JavaScript en Angular Project?
- ¿Cómo llamar a las funciones de JavaScript desde la clase Typescript?
Sería genial si alguien me da un ejemplo !!
¡¡Gracias de antemano!!
2 answers
Answer question0
1. ¿Cómo y dónde incluir archivos JavaScript en Angular Project?
Debe incluir su archivo JS en la carpeta de activos y consultar este archivo JS en el archivo .angular-cli.json .
Consulte la instantánea,
La estructura de carpetas debería ser así.
.angular-cli.json
2. ¿Cómo llamar a las funciones de JavaScript desde la clase Typescript?
su TS debería ser así.
contenido del archivo myJsFile.js.
Esta lógica de muestra mencionada anteriormente funcionará, lo he probado y probado usando la versión 4, así que espero que funcione también con la versión 5.
Actualizando la respuesta para el nuevo lanzamiento de la versión Angular. Funciona perfectamente hasta la versión
11.2.6.
Encuentre el código (función con parámetro) aquí para Angular11
0
La respuesta dada por Arun Raj R es perfecta.
Pero para el proyecto angular 6+ , debe tomar angular.json en lugar de angular-cli.json .
Además, si desea pasar un parámetro dentro de una función externa que proviene del archivo js, use solo el function name .
Por ejemplo:
aplicación.componente.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; declare function 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'); } };su archivo Js:
function myfunction(params1, params2) { console.log('param1', params1); console.log('param2', params2); }