Angular 2加载后如何加载外部脚本答案

【问题标题】：How to load external script after Angular 2 loadsAngular 2加载后如何加载外部脚本
【发布时间】：2018-02-17 00:17:12
【问题描述】：

我有从 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 -->

【问题讨论】：

你试过把所有的脚本文件放在 index.html 中吗？
是的，没有运气:(

标签： javascript asp.net-mvc angular api metronic

【解决方案1】：

试试这个：

从@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();
  }

【讨论】：