在 Angular Material TreeTable 组件中实现 Matsort 和 Matpaginator

Question

我正在使用npm library ng-material-treetable。我想在这个库中实现matsort 和mat paginator。

我试图在这个库的 fesm5 文件夹中的 ng-material-treetable.js 文件中添加 @ViewChild 方法，但出现 unexpected identifier @ 错误。

下面是试图修改的一段代码（My Line 是我添加的一段代码）-

Line 394 to 416
    TreetableComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        @ViewChild(MatSort) sort: MatSort;                 //My line
        @ViewChild(MatPaginator) paginator: MatPaginator;  //My line
        function () {
            var _this = this;
            this.tree = Array.isArray(this.tree) ? this.tree : [this.tree];
            this.options = this.parseOptions(defaultOptions);
            /** @type {?} */
            var customOrderValidator = this.validatorService.validateCustomOrder(this.tree[0], this.options.customColumnOrder);
            if (this.options.customColumnOrder && !customOrderValidator.valid) {
                throw new Error("\n        Properties " + customOrderValidator.xor.map(function (x) { return "'" + x + "'"; }).join(', ') + " incorrect or missing in customColumnOrder");
            }
            this.displayedColumns = this.options.customColumnOrder
                ? this.options.customColumnOrder
                : this.extractNodeProps(this.tree[0]);
            this.searchableTree = this.tree.map(function (t) { return _this.converterService.toSearchableTree(t); });
            /** @type {?} */
            var treeTableTree = this.searchableTree.map(function (st) { return _this.converterService.toTreeTableTree(st); });
            this.treeTable = flatMap(treeTableTree, this.treeService.flatten);
            this.dataSource = this.generateDataSource();
            this.dataSource.paginator = this.paginator;  //My line
            this.dataSource.sort = this.sort;            //My line
        };

第 497 到 504 行 -

TreetableComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ng-treetable, treetable',
                    // 'ng-treetable' is currently being deprecated
                    template: "<table mat-table [dataSource]=\"dataSource\" matSort [ngClass]=\"formatElevation()\">\n\n  <div *ngFor=\"let column of displayedColumns; first as isFirst;\">\n    <ng-container matColumnDef=\"{{column}}\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        {{options.capitalisedHeader ? (column | titlecase) : column}}\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        <div *ngIf=\"isFirst\">\n          <div class=\"value-cell\">\n            <div [innerHTML]=\"formatIndentation(element)\"></div>\n            <mat-icon [ngStyle]=\"{'visibility': element.children.length ? 'visible' : 'hidden'}\" (click)=\"onNodeClick(element)\">\n              {{element.isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}\n            </mat-icon>\n            <div>{{element.value[column]}}</div>\n          </div>\n        </div>\n        <div *ngIf=\"!isFirst\">\n          {{element.value[column]}}\n        </div>\n      </td>\n    </ng-container>\n  </div>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row [ngClass]=\"{'highlight-on-hover': options.highlightRowOnHover}\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n</table>\n",
                    styles: ["table{width:100%}.value-cell{display:flex;align-items:center}mat-icon{cursor:pointer}.highlight-on-hover:hover{background-color:#f0f0f5}td[class*=' mat-column']{width:10vw;min-width:10vw;max-width:10vw}.mat-cell,.mat-header-cell{padding:10px}.vertical-separator{border-left:1px solid #f0f0f5}"]
                }] }
    ];

在此模板代码中，我在表格中添加了matSort。但这行不通。如果有人对此有所了解，请提供帮助。

注意 - 这段代码来自文件夹结构下的那个库 - ng-material-treetable/fesm5/ng-material-treetable.js 提前致谢！！

Answer 1

尝试像这样修改代码：

  TreetableComponent.prototype.ngOnInit =
       sorter?: MatSort;
       @ViewChild(MatSort)
       set sort(ms: MatSort) {
           this.sorter = ms;
           if (this.sorter && this.dataSource) {
              this.dataSource.sort = this.sorter;
           }
       }
       paginator?: MatPaginator;
       @ViewChild(MatPaginator)
       set matPaginator(mp: MatPaginator) {
           this.paginator = mp;
           if (this.paginator && this.dataSource) {
               this.dataSource.paginator = this.paginator;
           }
       }

      function () {
          var _this = this;
          this.tree = Array.isArray(this.tree) ? this.tree : [this.tree];
          this.options = this.parseOptions(defaultOptions);
          /** @type {?} */
          var customOrderValidator = this.validatorService.validateCustomOrder(this.tree[0], this.options.customColumnOrder);
          if (this.options.customColumnOrder && !customOrderValidator.valid) {
              throw new Error("\n        Properties " + customOrderValidator.xor.map(function (x) { return "'" + x + "'"; }).join(', ') + " incorrect or missing in customColumnOrder");
          }
          this.displayedColumns = this.options.customColumnOrder
              ? this.options.customColumnOrder
              : this.extractNodeProps(this.tree[0]);
          this.searchableTree = this.tree.map(function (t) { return _this.converterService.toSearchableTree(t); });
          /** @type {?} */
          var treeTableTree = this.searchableTree.map(function (st) { return _this.converterService.toTreeTableTree(st); });
          this.treeTable = flatMap(treeTableTree, this.treeService.flatten);
          this.dataSource = this.generateDataSource();
      };

这可能会解决您的问题，因为在构建和 ngOnInit 期间，分页器/排序可能还没有准备好。这样，一旦模板识别出分页器/排序，它就会将其分配给数据源

Answer 2

这是一种糟糕的做法。

当使用 NPM 库时，你不应该编辑该库的代码，我将解释原因：

当您运行npm i 时，您实际上是从远程服务器安装软件包。感谢 NPM，如果版本没有被修改，您不需要替换已经存在的文件。

所以这意味着你的 package.json 文件中必须有一个固定的版本。任何 semver 修改器都会在您运行 npm i 的第二次删除您的修改。

但主要问题不存在：主要问题在于持续集成或团队合作。

当您将代码推送到 github 时，您不会推送您的节点模块。这意味着您不会推动您的修改！当你有 CI 时，下载包的工具是你的，而不是你：它会下载原始包，无需你的修改。

最后，您的修改工作的唯一地方就是您自己的计算机上。

最后，即使这些问题不存在，这些包也是用 Javascript 编写的。 Angular 正在使用 Typescript ：然后它将 Typescript 编译成 Javascript 包。

这意味着您不能在 JS 文件中使用 Angular 代码。这意味着没有装饰器，没有依赖注入。如果你想这样做，你必须找到装饰器的编译代码和依赖注入的编译代码。