▷Angular 2: importar archivo js externo al componente ✔️ Foro Ayuda 【 2024 】

Solución:

Idealmente necesitas tener .d.ts archivo de mecanografía para dejar Linting trabaja.

Pero parece que d3gauge no tiene uno, puede pedir a los desarrolladores que lo proporcionen y esperar que lo escuchen.

Alternativamente, puede resolver este problema específico haciendo esto

declare var drawGauge: any;

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

Si lo usa en varios archivos, puede crear un d3gauage.d.ts archivo con el contenido a continuación

declare var drawGauge: any;

y referenciarlo en su boot.ts (bootstrap) en la parte superior, como este

///<reference path="../path/to/d3gauage.d.ts"/>

Después de perder mucho tiempo en encontrar su solución, He encontrado uno. Para su conveniencia, he utilizado el código completo con el que puede reemplazar todo su archivo.

Ésta es una respuesta general. Digamos que desea importar un archivo llamado testjs.js en su componente angular 2. Cree testjs.js en su carpeta de activos:

activos> testjs.js

function test(){
    alert('TestingFunction')
}

incluya testjs.js en su index.html

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Project1</title>
  <base href="https://foroayuda.es/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="./assets/testjs.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

En su app.component.ts o en cualquier archivo component.ts donde desee llamar a este js, declare una variable y llame a la función como se muestra a continuación:

app.component.ts

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

declare var test: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title="app works!";


  f(){
    new test();
  }
}

Finalmente en tu app.component.html probar la función

app.component.html

<h1>
  <button (click)='f()'>Test</button>
</h1>

En lugar de incluir tu js extensión de archivo en index.html, puedes incluirlo en .angular-cli-json expediente.

Estos son los pasos que seguí para que esto funcione:

Primero incluya su js presentar en assets/js
En .angular-cli.json – agregue la ruta del archivo en los scripts:
[../app/assets/js/test.js]
En el componente donde desea utilizar las funciones del js expediente.

Declare en la parte superior dónde desea importar los archivos como

declare const Test:any;

Después de esto puede acceder a sus funciones como por ejemplo Test.add()

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Angular 2: importar archivo js externo al componente

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: