使用angular5组件内的Javascript函数处理HTML元素

Question

我正在开发一个应用程序，需要在文档加载时显示订阅新闻稿模式。文档完全加载后需要在一定时间后加载模态，并且只需要显示一次。所以为了实现这一点，我已经使用cookie在Javascript中实现了这一点。但现在我想将它转移到角度应用程序。任何人都可以建议我，如何使用角度内的javascript函数显示模型？

我的js文件是index.js

function setCookie(isNewsLetterAlreadyBoxShown, expiryDate){
  var date = new Date();
  date.setDate( date.getTime() + (expiryDate * 24 * 60 * 60 * 1000));
  var expires = "expires="+ date.toUTCString();
  document.cookie = "returningUser =" + isNewsLetterAlreadyBoxShown + ";" + expires + ";path=/";
}

function getCookie(cookieName){
  var name = cookieName + "=";
  var cookies = document.cookie.split(";");

  for(var i = 0; i < cookies.length; i++){
    var cookie = cookies[i];

    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      //                        return cookie.substring(name.length, c.length);
      return true;
    }
  }
  return false;
}

function checkCookie() {
  var returningUser = getCookie("returningUser");
  if(returningUser){
    return;
  } else {
    showSubscribeNewsLetter();
    setCookie(true, 365);
  }
};

function showSubscribeNewsLetter() {
  $(document).ready(function () {
    setTimeout(function () {
      $("#myModal").modal('show');
    }, 2000);
  });
}

而component.ts如下

import { Component, OnInit } from '@angular/core';
declare var checkCookie: any;

@Component({
  selector: 'app-subscribe-newsletter',
  templateUrl: './subscribe-newsletter.component.html',
  styleUrls: ['./subscribe-newsletter.component.css']
})
export class SubscribeNewsletterComponent implements OnInit {



  constructor() { }

  ngOnInit() {
    this.showSubscribeNewsLetter();
  }

  showSubscribeNewsLetter()
{
  ***new checkCookie();***

}

}

我的函数正在运行，但我得到$未定义错误。我知道我正在从另一个文件访问id，所以我收到了这个错误。有什么方法可以解决这个问题？

先感谢您。

**是给出错误的函数。

Answer 1

您需要将jQuery添加到项目中。

使用CDN将jQuery添加到index.html 要么 使用npm在本地安装它并将其添加到angular-cli.json

注意：更新angular-cli.json后，请不要忘记重新启动服务器