JS 和 css 在 angular 中不工作 5,转到下一个路由器

JS and css not working in angular 5, on go to next router

在 angular 5 个项目中,当我要去下一条路线时 CSS 并且 js 不工作,当我重新加载页面时它工作正常当我点击路由器时发生同样的事情并且重新加载页面后,它运行良好。 我正在加载所有 CSS 和 js 文件,代码在这里。

.angular-cli.json

 "styles": [
    "assets/css/jquery/jquery-ui.min.css",
    "assets/css/bootstrap/bootstrap.min.css",
    "assets/css/fontawesome/font-awesome.min.css",
    "assets/css/summernote/summernote.css",
    "assets/css/nvd3/nv.d3.css",
    "assets/css/fullcalendar/fullcalendar.css",
    "assets/css/dropzone/dropzone.css",
    "assets/css/animate/animate.min.css",
    "assets/css/mcustomscrollbar/jquery.mCustomScrollbar.css",
    "assets/css/theme-default.css",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.scss"
  ],
  "scripts": [
    "assets/js/plugins/jquery/jquery.min.js",
    "assets/js/plugins/jquery/jquery-ui.min.js",
    "../node_modules/froala-editor/js/froala_editor.pkgd.min.js",
    "assets/js/plugins/bootstrap/bootstrap.min.js",
    "assets/js/plugins/icheck/icheck.min.js",
    "assets/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js",
    "assets/js/plugins/morris/raphael-min.js",
    "assets/js/plugins/scrolltotop/scrolltopcontrol.js",
    "assets/js/plugins/bootstrap/bootstrap-datepicker.js",
    "assets/js/plugins/owl/owl.carousel.min.js",
    "assets/js/plugins/datatables/jquery.dataTables.min.js",
    "assets/js/plugins/tableexport/tableExport.js",
    "assets/js/moment.min.js",
    "assets/js/plugins/daterangepicker/daterangepicker.js",
    "assets/js/settings.js",
    "assets/js/plugins.js",
    "assets/js/actions.js"
   ], 

这里有另一条路线的详细信息,我尝试将代码写入 index.html 和 styles.scss 但没有解决同样的问题,当我点击任何路线时它不起作用,当我刷新所有页面时一切正常。

并像这样路由并且在编译期间没有任何错误。

app-routing.module.ts

{ path: 'officers', component: OfficersListComponent},

我找到了答案,可以通过两种方法解决,一种是在 index.html 中包含 js 文件,但是专家说永远不要在 index.html 中添加 js 文件,因为会出现负载和安全问题,我不知道我还在寻找专家。 那么另一种方法是基于组件。

ngOnInit() {
$(document).ready(function () {
  $.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }

这总是有帮助的,在页面加载时也会加载 js 文件,您也可以包含 Jquery 它的工作完美。