angular2中引入js文件

2在angular2+webpack+typescript项目中怎么引入js插件？
在github上搜ng2-admin https://github.com/akveo/ng2-admin 项目，可以查看如何引入jqeury、ckeditor等插件
这里再介绍一种直接引入的方式：
在index.html中引入相应的js文件

<!--文本编辑器-->
  <link rel="stylesheet" href="assets/plugin/mathjax_custom.css">
  <link rel="stylesheet" href="assets/plugin/ueditor_custom.css">
  <script type="text/javascript" src="assets/plugin/ueditor_1.4.3.3/ueditor.config.js"></script>
  <script type="text/javascript" src="assets/plugin/ueditor_1.4.3.3/ueditor.all.js"></script>
  <script type="text/javascript" src="assets/plugin/ueditor_1.4.3.3/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript" src="assets/plugin/ueditor_1.4.3.3/ueditor.parse.min.js"></script>
  <script type="text/javascript" src="assets/plugin/ueditor_custom.js"></script>
  <!--viewerjs-->
  <link rel="stylesheet" href="assets/plugin/viewerjs/viewer.css">
  <script type="text/javascript" src="assets/plugin/viewerjs/viewer.js"></script>

在组件中声明

declare var Viewer: any;

通过Viewer的使用方法和js中一样

initViewer() {
        let _self = this;
        let viewBox = document.getElementById('viewer');
        let viewerContainer;
        let options = {
            navbar: 0,
            title: 0,
            fullscreen: false,
            transition: false,
            keyboard: false,
            ready: function (e) {
                viewerContainer = document.getElementsByClassName('viewer-container')[0];
                viewerContainer.style.position = 'absolute';
                viewerContainer.style.backgroundColor = '#f3f3f3';
                viewBox.appendChild(viewerContainer);
            },
            show: function (e) {
                viewBox.style.display = 'block';
            },
            shown: function (e) {
                console.log(e.type);
            },
            hide: function (e) {
                console.log(e.type);
            },
            hidden: function (e) {
                console.log(e.type);
                _self.isViewPicture = false;
            },
            view: function (e) {
                console.log(e.type, e.detail.index);
            },
            viewed: function (e) {
                console.log(e.type, e.detail.index);
                // this.viewer.zoomTo(1).rotateTo(180);
                _self.viewer.zoomTo(0.38, true);
                _self.viewer.moveTo(60, 0);
            }
        };
        _self.viewer = new Viewer(document.getElementById('images'), options);
    }

类似的ueditor使用方法：

declare var UE: any;

ngOnInit() {
        UE.delEditor(this.editorName);
        UE.getEditor(this.editorName, {
            autoHeight: false,
            allowDivTransToP: false
        });
        this.ue = UE.getEditor(this.editorName);
        if (this._content) {
            let self = this;
            this.ue.ready(() => {
                self.ue.setContent(self._content, false);
            });
        }
    }

关于js插件引入到ts项目中，还需要对他们进行整理，会有更好的、更为系统的引入方式，待以后再做整理、总结。先分享以上内容给项目于困扰的同学参考。

有兴趣的同学还可以关注如何编写ts声明文件，在angular2+webpack+starter框架中的custom-typings.d.ts就是这类文件，可以参考学习一下，另外这里有关于这一块的ts教程可以学习https://www.tslang.cn/docs/handbook/declaration-files/introduction.html