为什么我必须重新加载页面才能使我的单页面应用程序识别外部javascript文件?

时间:2019-06-18 12:49:09

标签: javascript html angular components angular-router

我有一个用angular 7构建的单页面应用程序。当我导航到某些页面时,我注意到DOM的某些部分结构不正确。但是,当我刷新页面时,DOM能够按照预期的方式重组HTML。我的单页应用程序使用模板中的外部javascript和css文件,这些文件已添加到我的angular.json文件中。但是,当我使用angular-router离开某些页面,然后导航回到上一页时,HTML的结构不正确。只有刷新页面时,它才能正确构造内容。我的问题是:是什么原因造成的?如何在不刷新页面的情况下使我的单页面应用程序识别并实现外部CSS和javascript文件?

我尝试使用ng-serve重新启动角度服务器

以下是我的主页示例,该示例使用外部javascript文件为我的主页横幅创建滑块

 <div class="eco_wrapper">
  <div class="content">
    <app-home-banner></app-home-banner>
    <app-home-eco-services></app-home-eco-services>
    <app-home-eco-promotion></app-home-eco-promotion>
    <app-home-eco-video></app-home-eco-video>
    <app-home-eco-products></app-home-eco-products>
    <app-home-eco-testimonal></app-home-eco-testimonal>
    <app-home-eco-blog></app-home-eco-blog>
  </div>
 </div>

以下是我如何将外部CSS文件添加到我的angular.json样式数组中的示例。

       {
         "input": "src/assets/css/bootstrap.css"
       },
       {
        "input": "src/assets/css/font-awesome.css"
       },
       {
         "input": "src/assets/css/chosen.min.css"
       },
       {
         "input": "src/assets/css/slick-slider.css"
       },
       {
         "input": "src/assets/css/slick-slider.css"
       },
       {
         "input": "src/assets/css/owl.carousel.css"
       },

以下是我如何将外部js文件添加到angular.json脚本数组的示例

    "src/assets/js/jquery.js",
    "src/assets/js/bootstrap-lab.js",
    "src/assets/js/bootstrap.js",
    "src/assets/js/slick-slider.js",
    "src/assets/js/jquery.bxslider.js",
    "src/assets/js/owl.carousel.js",

0 个答案:

没有答案