Использование jQuery в Angular 6 - PullRequest
0 голосов
/ 26 сентября 2018

У меня есть этот простой файл javascript 'my.js' внутри папки src моего приложения Angular

slideDown(id) {
   $('#' + id).slideToggle();
}

Я хочу вызвать эту функцию следующим образом

<div class="view-details" (click)="slideDown('theID')">

Я посмотрелвезде, и я не могу понять, как включить my.js в компоненты

Подойдет любая подсказка

PS: плохо знаком с Angular

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Это рабочий пример проекта, который реализован для удовлетворения ваших требований: https://codesandbox.io/s/nkxmjprrnp

Существует два основных файла, которые задействованы в выполнении этой функции:

1.my.js файл

function slideDown(i) {
  alert(
    "You've already used this function from my.js! The passed value is: " + i
  );
 $("#abc").html("I've been changed by using jquery");
}

export default slideDown;
файл app.component.ts, который импортирует и использует файл my.js

import { Component } from "@angular/core";
import slideDown from "../my";
@Component({
  selector: "app-root",
  template: `
  <div>
    <h2>Welcome to Stack Overflow, Dimitris Kounarakis!</h2>
    <button (click)="handleClick()">Click me</button>
    <h4 id="abc">Hello</h4>
  </div>
 `
})
export class AppComponent {
  title = "CodeSandbox";

  handleClick() {
    slideDown(2);
  }
}
в файле index.html, мы должны включить библиотеку jquery, используя CDN:

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Angular</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

<body>
	<app-root></app-root>
</body>

</html>

Надеюсь, это поможет.

0 голосов
/ 26 сентября 2018

Вы можете выполнить следующие шаги

1) First add a reference of your external JS file for importing it to the component. 
   import * as my from '../../src/assets/my.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var slideDown: any;

3) ngOninit(){
    slideDown();
   }

Если вы хотите получить доступ внутри шаблона.Вы можете назначить публичную переменную.this.slideDown = slideDown;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...