问如何将Angular 10组件添加到Ag-Grid单元
EN

Stack Overflow用户

提问于 2020-10-20 21:42:15

回答 2查看 185关注 0票数 0

我有一个Angular10组件(切换开关)，我需要将它包含在我的ag-grid (单元格)的特定列中。

目前，我有一个标准的html复选框，如下所示：

colDefs: ColDef[] = [
    { field: 'Name',             headerName: 'Name'},
    { field: 'Somethingelse',    headerName: 'Something else'},
    { field: 'Checkbox',         headerName: 'A Checkbox',      //<--this one
        editable:true,    
        checkboxSelection: false,   
        headerCheckboxSelection: false,   
        filter: false,    
        sortable: false,    
        cellRenderer: function (params: { value: boolean; }) {. //<--draws this
          var input = document.createElement("input");
          input.type = "checkbox";
          input.checked = params.value;
          return input;            //<--want to draw my component here instead
    } }
  ];

我要使用的组件已存在于我的项目中，而不是复选框：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-toggle-switch',
  templateUrl: './toggle-switch.component.html',
  styleUrls: ['./toggle-switch.component.scss']
})
export class ToggleSwitchComponent implements OnInit {
  selected: boolean = false;
  constructor() { }
  ngOnInit(): void {}
}

如何在复选框中包含Angular10组件？

angular

ag-grid

angular10

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-22 07:43:34

首先，在AG Grid组件文件中导入组件。

import { ToggleSwitchComponent } from './ToggleSwitchComponent '; // whatever is the path

在coldef中，只需将渲染器分配给cellRenderer即可

  { 
        field: 'Checkbox',
        headerName: 'A Checkbox',
        editable:true,    
        checkboxSelection: false,   
        headerCheckboxSelection: false,   
        filter: false,    
        sortable: false,    
        cellRenderer: 'ToggleSwitchComponent'
    } }

第三，在frameworkComponents下注册您的组件

 this.frameworkComponents = {
      ToggleSwitchComponent: ToggleSwitchComponent,
...
...
}

这就是让您的自定义组件呈现所需的全部内容。

票数 2

Stack Overflow用户

发布于 2020-10-20 22:16:23

Few custom classes you need to add as per your need. Hope you can customize it by yourself. If you need all files let me  know I will send you generic files.  

<table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="2%"></th>
            <th width="20%">Rule Name</th>
            <th width="10%">Rule ID</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of gridItems">
            <td width="2%">
             <generic-checkbox [chkbxoptid]="'ruleId'"
              [data]="item.ruleInfo"
              ></generic-checkbox>
            </td>
            <td width="20%">{{item.ruleInfo.ruleName}}</td>
            <td width="10%">{{item.ruleInfo.ruleId}}</td>
          </tr>
        </tbody>
      </table>
    
    
    genericcomponent.ts
    import { Component, Input, OnInit, OnDestroy } from '@angular/core';
    
    import { TVUIConstants } from '../utils/tvconstants';
    import { Subscription } from 'rxjs';
    import { Rule } from '../models/rule-models';
    import { BaseServices } from '../services/base.service';
    import { UIDGenerator } from '../services/uid-generator.service';
    @Component({
      selector: 'generic-checkbox',
      template: `<input type="checkbox" [(ngModel)]=
      "isChecked"  *ngIf="hideCheckBox"
      value="{{isChecked}}" (click)='checkClickHandler()'>`
    
    })
    
    export class ChkBoxComponent implements OnInit, OnDestroy {
        @Input() chkbxoptid:string;
        @Input() multiselectable:boolean = true;
        @Input() set data(value:any){
          if(value === undefined ||
            (this.chkbxoptid
              && value
              && value[this.chkbxoptid] === undefined)){
            this._hideCheckBox = false;
          }else{
            this._data = value;
            this._hideCheckBox = true
          }
        }
        @Input() rowindex:number;
        private isChecked:boolean;
        private _subscription: Subscription;
        private _hideCheckBox:boolean;
        private _data:any;
        private _chkbxunqid:string;
    
        constructor(private baseService:BaseServices,
                    private uidGenerator:UIDGenerator) {
          this._subscription = this.baseService.dataEvent.dataObserver.subscribe(data => {
            if(data.subevnttype === TVUIConstants.CLEAR_CHKBX_REF
              && data.cid !== undefined
              && data.cid !== this._chkbxunqid){
              this.isChecked = data.value;
              if(this._data)
                this._data.isChecked = data.value;
            }else if(data.subevnttype === TVUIConstants.REFRESH_RULES){
              if(this.isChecked && this.isChecked === true){
                this.isChecked = false;
              }
    
            }
          })
         }
    
        ngOnInit() {
          if(!this.multiselectable){
           // this._chkbxunqid = this.uidGenerator.getUnqUID("chkbx_");
          }
          if(this._data && this._data.isChecked === true)
                     this.isChecked = this._data.isChecked;
        }
    
        private checkClickHandler():void{
          this.isChecked = !this.isChecked;
          this._data.isChecked = this.isChecked;
    
          if(!this.multiselectable && this.isChecked){
           // this.baseService.dataEvent.publishEvt({subevnttype: TVUIConstants.CLEAR_CHKBX_REF, cid: this._chkbxunqid, value: false})
          }
        }
    
        get hideCheckBox(){
          return this._hideCheckBox;
        }
    
        ngOnDestroy() {
          // prevent memory leak when component destroyed
          this._subscription.unsubscribe();
        }
    }