2

我有从 API 获取数据的动态导航栏。

问题是导航栏中的列表项没有一致地切换。它有时有效，但大多数时候无效。

控制台窗口中没有脚本错误，很干净。

导航面板切换的脚本来自名为layout.js的文件中的 Metronic 模板本身

我怀疑它是因为 layout.js 有时会在 DOM 中的角度渲染之前加载。在这种情况下，切换无法正常工作。

请有任何建议！

在此处输入图像描述 

<!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>    
    <script src="/node_modules/zone.js/dist/zone.js"></script>    
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="/systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

 <!-- BEGIN THEME LAYOUT SCRIPTS -->

    <script src="~/assets/layouts/layout/scripts/demo.min.js" defer type="text/javascript"></script>
    <script src="~/assets/layouts/global/scripts/quick-sidebar.min.js" defer type="text/javascript"></script>
    <script src="~/assets/layouts/global/scripts/quick-nav.min.js" defer type="text/javascript"></script>
    @*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*@
    <script src="~/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/assets/layouts/layout/scripts/layout.js" defer></script>
    <!-- END THEME LAYOUT SCRIPTS -->
4

1 回答 1

0

尝试这个：

从 @angular/Core 导入 AfterViewInit 并实现它的功能。

确保您的 layout.js 在angular-cli.json的应用程序脚本中被引用。

在您的 component.ts 中导入您的 layout.js，如下所示：

import {layout} from 'file/location/layout.js';

编辑您的 layout.js 文件，使其当前代码用以下内容包装：

var extJs = (function() {
    return{
    getExtJs: function() {
        //js code goes here
    }
}

回到您的组件中，声明一个引用 layout.js 中的变量的变量：

declare var extJs: any;

然后在视图加载完成后调用 layout.js 函数：

ngAfterViewInit(): void {
    extJs.getExtJs();
  }
于 2018-04-10T05:23:24.137 回答