【问题标题】:Add script js to an Angular 9 project将脚本 js 添加到 Angular 9 项目
【发布时间】:2020-08-07 14:23:58
【问题描述】:

我尝试将 script.js 添加到 angular.json 并在一个组件中使用它,因此对于那些可以建议将脚本标记添加到我的 html 文件的人来说这不是一个好主意,所以有人可以提出另一个想法或使我的脚本工作缺少什么。谢谢

这是我的脚本:

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
dots:false,
nav:true,
mouseDrag:false,
autoplay:true,
animateOut: 'slideOutUp',
responsive:{
    0:{
        items:1
    },
    600:{
        items:1
    },
    1000:{
        items:1
    }
}
});

文件.html:

<header>

  <div class="owl-carousel owl-theme">
      <div class="item">
          <img src="https://cdn.pixabay.com/photo/2017/10/24/10/30/business-2884023_960_720.jpg" alt="images not found">
          <div class="cover">
              <div class="container">
                  <div class="header-content">
                      <div class="line"></div>
                      <h2>Teimagine Digital Experience with</h2>
                      <h1>Start-ups and solutions</h1>
                      <h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
                  </div>
              </div>
           </div>
      </div>                    
      <div class="item">
          <img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found">
          <div class="cover">
              <div class="container">
                  <div class="header-content">
                      <div class="line animated bounceInLeft"></div>
                      <h2>Reimagine Digital Experience with</h2>
                      <h1>Intelligent solutions</h1>
                      <h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
                  </div>
              </div>
           </div>
      </div>                
      
</header>

【问题讨论】:

    标签: javascript angular typescript tags


    【解决方案1】:

    方式一:

    • 参考 angular-cli.json 里面的脚本(angular.json 时 使用 Angular 6+) 文件。

      "scripts": [
          "../path" 
       ];
      

      然后添加typings.d.ts(如果没有,则在src中创建此文件 已经存在)

      declare var variableName:any;
      

      将其导入到您的文件中

      import * as variable from 'variableName';
      

    参考https://stackoverflow.com/a/44817445/9640128

    方式二:

    • 您可以在组件动态加载时添加多个脚本

    参考:https://stackoverflow.com/a/49981918/9640128

    【讨论】:

    • 感谢您的回复 我尝试了第二种方法,但它不起作用我将 MyScript.js 放在资产上并在 component.ts 上动态添加多个脚本功能但仍然无法正常工作
    • 是的 core.js:6210 错误类型错误:$(...).owlCarousel 不是 SliderComponent.loadJs (slider.component.ts:23) 的 owlCarousel (script.js:2) 的函数)
    猜你喜欢
    • 2017-05-29
    • 2020-08-09
    • 1970-01-01
    • 2020-11-23
    • 1970-01-01
    • 2021-09-06
    • 2018-12-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多