ng6.x 组件ng2-tree ng2-file-upload 使用

tree：

将你要构建树的数据按照TreeModel转化就行了

this._tree = {
            value: '所有一级分类',
            id: 0,
            children: [],
            settings: this._settings
        };
        //constructor first
        this._tree.children = data.filter(e => !e.parent || e.parent.id == 0).map(e => {
            return {value: e[this.title], id: e[this.id], children: []}
        })

我这边发请求获取后台数据再构建树的 要注意树一开始不要赋值 不然覆盖值没用  没深入研究 欢迎讲解 settings也是用npm上提供的  调用nodeSelected 回调方法获取node就ok了

<tree #appTree [tree]="_tree" [settings]="_settings" (nodeSelected)="handleSelected($event)"></tree>

file-uoload：

构建uploader设置各个回调方法以及请求地址 通过@ViewChild获取引用调用点击时间 在父组件同理调用这个方法 页面上就可以以各种形式展示

  @ViewChild('fileUploadBtn')
    fileUploadBtn: ElementRef;

 this.fileUploadBtn.nativeElement.click();

ngOnInit() {
        let uploader: FileUploader = new FileUploader(this.genFileUploaderOptions());

        uploader.onWhenAddingFileFailed = this.whenAddingFileFailed.bind(this);
        uploader.onSuccessItem = this.successItem.bind(this);
        uploader.onAfterAddingFile = this.afterAddFile;
        uploader.onBuildItemForm = this.buildItemForm;

        this.uploader = uploader;
    }
...


private genFileUploaderOptions(): FileUploaderOptions {
        return <FileUploaderOptions>{
            url: this.appConfig.getAttachmentBase() + "upload",
            method: "POST",
            autoUpload: true,
            maxFileSize: 20 * 1024 * 1024,
            queueLimit: 5,
            removeAfterUpload: true,
            // headers: [
            //     {name: "token", value: this.appStorage.loginData.token}
            // ],
            allowedFileType: this.allowedFileType
        };
    }

<input #fileUploadBtn style="display: none;" type="file" ng2FileSelect [uploader]="uploader" [multiple]="multiple"/>