angular2中引入js文件

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


  
  
  
  
  
  
  
  
  
  

在组件中声明

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

你可能感兴趣的:(angular2中引入js文件)