Question

我有很多组件，每个组件都想包含js文件。我必须使用第三方js文件，并且此js文件特定于任何组件。我的意思是这些js文件不是全局文件，它们是特定于组件的。因此，我想将一个js文件包含到组件中。

如何将js文件包含在组件中？

index.html（项目中的主要html）

var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

post.component.html（组件html）

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <base href="/">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body class="fixed-navbar">
  <div class="site">

    <app-root></app-root>

  </div>

  <script src="assets/plugins/jquery/jquery.min.js"></script>
  <script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script></script>


  <!-- Component Specific JS Files Have To Come Here -->
  <!-- Component Specific JS Files Have To Come Here -->
  <!-- Component Specific JS Files Have To Come Here -->
  <!-- Component Specific JS Files Have To Come Here -->
  <!-- Component Specific JS Files Have To Come Here -->


</body>

</html>

user.component.html（组件html）

<p> Post 1</p>
<p> Post 2 </p>
<p> Post Bla bla bla </p>



<!-- This scripts is only for this component -->
<!-- This js section has to go to specific place in index.html where i type -->

<script src="/assets/plugins/parallax/parallax.min.js"></script>
<script src="/assets/plugins/easypiechart/jquery.easypiechart.min.js"></script>
<script>
  $(function () {
    $('.easypiechart').easyPieChart();
  });
</script>

<!-- Angular doesn't include these scripts to page -->

我无法使用* .component.html

中的“

<p> User 1 </p>
<p> User2 </p>
<p> User Bla bla bla </p>



<!-- This scripts is only for this component -->
<!-- This js section has to go to specific place in index.html where i type -->

<script src="/assets/plugins/anotherjs/anotherjs.min.js"></script>
<script src="/assets/plugins/chart2/jquery.chart2.min.js"></script>

<!-- Angular doesn't include these scripts to page -->

”标签添加js文件

Angular不同意这种用法。

Answer 1

您不能在模板中添加外部文件。

您可以将它们添加到index.html的{{1}}或scripts的内部

理想情况下，您不应该包括整个脚本，而应使用节点模块，并在必要的angular-cli.json组件中import

Answer 2

在Angular组件中包含jQuery会导致痛苦，但是如果您确实确定要遵循该路径，则可以在组件的TypeScipt文件而不是模板中进行操作。

首先，您需要将jQuery安装到您的应用中。

public boolean checkMouseHoveronAllItems(WebDriver driver)
{
    String xpathOfItems="//[@id='homefeatured']/li['+index+']/div/div[1]/div/a[1]/img";                                                                        
    String xpathOfAddToCartButtons="//div[@class='button-container']/a[@title='Add to cart']";
    boolean res=false;
    for(int index=1;index<=countNoOfItems(driver);index++)
    {
        element=driver.findElement(By.xpath(xpathOfItems));
        performMouseHover(element);
        System.out.println("Item By index"+element.getAttribute("alt"));
        element=element.findElement(By.xpath(xpathOfAddToCartButtons));
        if(element.isDisplayed())
        {
            res=true;               
            Log.info("Element is available");
        }
        else 
        {
            res=false;
        }
    }
    return res;
}

在您的angular-cli.json中添加：

npm install jquery --save

现在在app.component.ts中，您将需要导入jQuery：

],
"scripts": ["../node_modules/jquery/dist/jquery.min.js"],

现在您可以在init之后编写jQuery

import * as $ from "jquery"

如何在Angular中将JS文件包含到组件中

index.html（项目中的主要html）

post.component.html（组件html）

user.component.html（组件html）

2 个答案: