jQuery 代码需要翻译成香草，所以我可以在 Angular 中使用答案

【问题标题】：jQuery code need to translate to vanilla so I can use in AngularjQuery 代码需要翻译成香草，所以我可以在 Angular 中使用
【发布时间】：2018-01-25 01:39:34
【问题描述】：

我在模板上有这段代码，我正在将代码转移到 Angular 4，但它不喜欢 jquery 上的 $ 所以我需要一种方法可以在 Angular 4 上使用它或者只是将它转换为纯js，所以我可以使用它。

代码如下：

$('#toggle-btn').on('click', function (e) {

        e.preventDefault();

        if ($(window).outerWidth() > 1194) {
          $('nav.side-navbar').toggleClass('shrink');
          $('.page').toggleClass('active');
        } else {
          $('nav.side-navbar').toggleClass('show-sm');
          $('.page').toggleClass('active-sm');
        }
      });

我该怎么做？

【问题讨论】：

标签： javascript jquery angular typescript ecmascript-6

【解决方案1】：

如何在 vanillaJS 中做同样的事情。

function toggle(elements, className){
    Object.keys(elements).forEach(element => elements[element].classList.toggle(className))
}

function handleClick(e){
    e.preventDefault();
    if (window.outerWidth > 1194) {
        toggle(document.querySelectorAll('nav.side-navbar'), 'shrink');
        toggle(document.getElementsByClassName('page'), 'active');
    } else {
        toggle(document.querySelectorAll('nav.side-navbar'), 'show-sm');
        toggle(document.getElementsByClassName('page'), 'active-sm');
    }
}

document.getElementById('toggle-btn').addEventListener('click', handleClick);

【讨论】：

【解决方案2】：

不添加jQuery包：

声明 var $: any;

如果您需要 typescript 定义，则将此包添加到您的 package.json

"@types/jquery": "^2.0.45",

【讨论】：