Question

我已经建立了一个使用名为 Wow Slider 的jquery插件的网站，现在我以前在标准html中使用过它，我想在angular中使用它！

我已经导入了jquery并且工作正常，现在我需要复制插件资源，现在当我将插件包括在src文件夹中时，我将它们复制到了 src / assets / * 内运行正常，让我共享代码，

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doubledoubleangular</title>
  <base href="/">
  <link rel="stylesheet" href="assets/engine1/style.css"/>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <div id="wowslider-container1">
    <div class="ws_images"><ul>
            <li><img src="assets/data1/images/slide1.png" alt="Bringing People Together" title="Bringing People Together" id="wows1_0"/></li>
            <li><img src="assets/data1/images/slide2.png" alt="bootstrap carousel" title="Every one wants a piece of me" id="wows1_1"/></li>
            <li><img src="assets/data1/images/slide3.png" alt="Every one wants a piece of me" title="Every one wants a piece of me" id="wows1_2"/></li>
        </ul></div>
    <div class="ws_bullets"><div>
            <a href="#" title="Bringing People Together"><span><img src="assets/data1/tooltips/slide1.png" alt="Bringing People Together"/>1</span></a>
            <a href="#" title="Every one wants a piece of me"><span><img src="assets/data1/tooltips/slide2.png" alt="Every one wants a piece of me"/>2</span></a>
            <a href="#" title="Every one wants a piece of me"><span><img src="assets/data1/tooltips/slide3.png" alt="Every one wants a piece of me"/>3</span></a>
        </div></div>
    <div class="ws_shadow"></div>
</div>
</body>
<script type="text/javascript" src="assets/engine1/wowslider.js"></script>
<script type="text/javascript" src="assets/engine1/script.js"></script>
</html>

问题是它出现在页面底部，而且它可能不包含在某些页面中，所以我需要使其成为组件，

现在我首先创建了一个名为 wowslider 的组件之后，我将文件导入到 angular.json 文件中，我们通常在其中添加jquery / bootstrap等，

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "src/assets/engine1/style.css"
            ],
"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/engine1/wowslider.js",
              "src/assets/engine1/script.js"
            ],

wowslider.component.html

<div id="wowslider-container1">
  <div class="ws_images"><ul>
          <li><img src="assets/data1/images/slide1.png" alt="Bringing People Together" title="Bringing People Together" id="wows1_0"/></li>
          <li><img src="assets/data1/images/slide2.png" alt="bootstrap carousel" title="Every one wants a piece of me" id="wows1_1"/></li>
          <li><img src="assets/data1/images/slide3.png" alt="Every one wants a piece of me" title="Every one wants a piece of me" id="wows1_2"/></li>
      </ul></div>
  <div class="ws_bullets"><div>
          <a href="#" title="Bringing People Together"><span><img src="assets/data1/tooltips/slide1.png" alt="Bringing People Together"/>1</span></a>
          <a href="#" title="Every one wants a piece of me"><span><img src="assets/data1/tooltips/slide2.png" alt="Every one wants a piece of me"/>2</span></a>
          <a href="#" title="Every one wants a piece of me"><span><img src="assets/data1/tooltips/slide3.png" alt="Every one wants a piece of me"/>3</span></a>
      </div></div>
  <div class="ws_shadow"></div>
</div>

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>
<app-wowslider></app-wowslider>

但是它没有按预期的方式工作，插件坏了，我已经调试了它，并得出结论，来自 angular.json 的资源没有加载，这就是为什么它坏了，他们在 npm 中没有哇滑块可用的软件包，因此我不得不手动添加它，我使用的是angular 7，对您有所帮助

将jquery插件转换为有角组件

0 个答案: