如何在Angular 2加载

Question

我有动态导航栏，用于从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 -->

Answer 1

试试这个：

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

确保angular-cli.json中的应用脚本中引用了layout.js。

在你的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();
  }