我有一个用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",