如何从角度调用jquery函数？答案

【问题标题】：How to call jquery functions from angular?如何从角度调用jquery函数？
【发布时间】：2018-11-20 15:52:09
【问题描述】：

我从 angular 6 开始，我对如何调用 jquery 函数有点困惑。

这是我的 app.conponent.html：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div class="main">
<nav class="navigator">
  <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" onclick="openNav()" href="#"><i class="material-icons">menu</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>
</nav>
</div>
<router-outlet></router-outlet>

这是我的 app.component.ts：

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
$(document).ready(function(){
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
});
  }
}

如果我使用标签 $('div').click(function(){ 并且只使用一个函数，这将按预期工作。但我想，我需要将每个不同的 id 与其各自的函数区分开来。

从 Angular 调用 jQuery 函数的最佳做法是什么？

感谢您的宝贵时间。

亲切的问候。

【问题讨论】：

将 jQuery 与 Angular 一起使用并不是一个很好的做法。看看那个帖子：stackoverflow.com/questions/34707577/…
angularjs 和 angulario 有自己的模式将事件处理程序绑定到元素。您不想使用 jQuery 进行这些操作。
这是另一个链接，详细回答了来自 jquery 背景时如何以角度思考。它还声明“不要用 jquery 增加 angularjs”stackoverflow.com/a/15012542/1203811
所以最好的做法是不要在Angular6中使用jquery，按照我的理解将相同的代码翻译成他们自己的框架？。

标签： jquery angular angular6

【解决方案1】：

只需输入控制台：

npm i @types/jquery

就是这样。

【讨论】：

【解决方案2】：

使用

declare var $: any;

不要使用

import * as $ from 'jquery';

declare var $: any; -- 为我工作

【讨论】：