Question

我正在尝试为我的组件加载一些外部JS库。但是，有些作品，有些则没有。我不确定是否有bootstrap-datatable的解决方法或者我必须修改JS文件？

这是我得到的错误： Error: Error: Multiple anonymous defines in module

import {Component, OnInit} from 'angular2/core';
import {Router, RouteConfig, RouterOutlet, RouterLink} from 'angular2/router';

import LeftNavComponent from '../common/left-nav';
import LeftNavHamburgerBtnComponent from '../common/left-nav-hambtn';

import ApprovalsComponent from '../approval/approvals';

@Component({
    selector: 'pc-home',
    styleUrls: ['app/components/home/home.css'],
    templateUrl: 'app/components/home/home.html',
    directives: [
        RouterLink,
        RouterOutlet,
        LeftNavComponent,
        LeftNavHamburgerBtnComponent
    ]
})
@RouteConfig([
    { path: '/approvals', component: ApprovalsComponent, name: 'Approvals', useAsDefault: true }
])
export default class HomeComponent implements OnInit {

    title: string;
    titleIcon: string;
    appVersion: string;

    constructor(private router: Router) {
        System.import('resources/js/datatables/datatables.min.js'); // not working
        System.import('resources/js/chosen/chosen.jquery.js'); // works
        System.import('resources/js/datapicker/bootstrap-datepicker.js'); // works
        //System.import('node_modules/chart.js/dist/Chart.min.js'); // Enable this if use Chart.js
    }

    ngOnInit() {
        this.title = 'Approvals';
        this.titleIcon = 'fa-edit';
        this.appVersion = 'v2016.8.1.0';

        if ($(document).width() < 769) {
            $('body').addClass('body-small');
        } else {
            $('body').removeClass('body-small');
        }

        $(window).bind("resize", function () {
            if ($(this).width() < 769) {
                $('body').addClass('body-small');
            } else {
                $('body').removeClass('body-small');
            }
        });
    }
}

Answer 1

为什么需要通过系统导入它们？它们似乎是除了Chart.js之外的jQuery插件。

如果以正确的顺序加载它们，您可以在Angular 2应用程序中访问它们。

Angular2加载外部Javascript库失败

1 个答案: