WEBIX 报表管理器与 Angular 9.1.9 集成

Question

目前我遇到了麻烦。我需要将 Angular 与 Widget Report Manager 集成。但是我遇到了未知的 view:reports 错误。

我遵循了这些步骤：

我安装了 webix-pro 并使用 npm i @xbs/webix-pro 和 npm i @xbs/reports 进行了报告。我将 js 和 css 包添加到 angular.json。这将是：

"styles": [
          "node_modules/@xbs/reports/codebase/reports.css",
          "node_modules/@xbs/webix-pro/webix.css"
        ],
"scripts": [
          "node_modules/@xbs/reports/codebase/reports.js",
          "node_modules/@xbs/webix-pro/webix.js"
        ],

我的组件中有 reporter.component.ts 这个：

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';

import * as webix from "@xbs/webix-pro";

@Component({
  selector: 'reports',
  templateUrl: './reporter.component.html'
})
export class ReporterComponent implements OnInit, OnDestroy {

  private ui : webix.ui.reports

  constructor(root: ElementRef) {

    this.ui = <webix.ui.reports> webix.ui({
      container: root.nativeElement,
      view: 'reports',
      url: "https://docs.webix.com/reports-backend/" //Here my backend
    })
  }

  ngOnInit(): void {
    this.ui.resize();
  }

  ngOnDestroy(): void {
    this.ui.destructor();
  }

}

这是将 webix 外部小部件与 Angular 集成的正确方法还是有其他方法？

Answer 1

我已经解决了。我删除：

import * as webix from "@xbs/webix-pro";

然后我添加了

declare const webix: any

webix-pro 并且报告 .js 和 .css 已经添加到 angular.json

此外，我可以为自定义报告管理器声明报告变量。

WEBIX 报表管理器与 Angular 9.1.9 集成

WEBIX Report Manager Integration with Angular 9.1.9

report

widget

webix

angular