Angular 如何为ng2智能表添加新的自定义按钮

Angular 如何为ng2智能表添加新的自定义按钮,angular,typescript,ng2-bootstrap,Angular,Typescript,Ng2 Bootstrap,我在我的项目中使用ng2智能表作为一个表。你可以在下面看到它 不过,我想在表的每一行末尾添加一个名为view的自定义按钮。我还想在单击“视图”按钮时打开一个新组件。那我该怎么办呢。我试了以下方法。但不是成功 add: { addButtonContent: '<i class="nb-plus"></i>', createButtonContent: '<i class="nb-checkmark"></i>', cancelButto

我在我的项目中使用ng2智能表作为一个表。你可以在下面看到它

不过,我想在表的每一行末尾添加一个名为view的自定义按钮。我还想在单击“视图”按钮时打开一个新组件。那我该怎么办呢。我试了以下方法。但不是成功

add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  confirmCreate: true
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  confirmSave: true
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true
},
view:{
  viewButtonContent:''
},

像这样定义设置


settings = {
    columns: {
      name: {
        title: 'Title',
      },
      description: {
        title: 'Description',
      },

      customColumn: {
        title: 'Actions',
        type: 'custom',
        filter: false,
        renderComponent: MyCustomComponent,
        onComponentInitFunction(instance) {
          //do stuff with component
          instance..subscribe(data=> console.log(data))
          }
   ...
这样定义新的按钮组件


@Component({
  selector: 'll-button-comp',
  template: ` <button (click)="click.emit(rowData)"> my button</button> `
})

export class MyCustomComponent implements OnInit{
  @Input() rowData: any;
  @Output() click:EventEmitter<any> = new EventEmitter(this.rowData);


  ngOnInit(){

  }
}

请注意,所选行的rowData对象将传递给该实例所属的行所属的组件定义如下设置


settings = {
    columns: {
      name: {
        title: 'Title',
      },
      description: {
        title: 'Description',
      },

      customColumn: {
        title: 'Actions',
        type: 'custom',
        filter: false,
        renderComponent: MyCustomComponent,
        onComponentInitFunction(instance) {
          //do stuff with component
          instance..subscribe(data=> console.log(data))
          }
   ...
这样定义新的按钮组件


@Component({
  selector: 'll-button-comp',
  template: ` <button (click)="click.emit(rowData)"> my button</button> `
})

export class MyCustomComponent implements OnInit{
  @Input() rowData: any;
  @Output() click:EventEmitter<any> = new EventEmitter(this.rowData);


  ngOnInit(){

  }
}
请注意,所选行的rowData对象被传递给该实例所属的行的组件

这是什么?添加:{addButtonContent:,createButtonContent:,cancelButtonContent:,confirmCreate:true},…这是什么可能的重复?添加:{addButtonContent:,createButtonContent:,cancelButtonContent:,confirmCreate:true},…的可能重复项