Question

我尝试在Angular2中发出一个事件，点击父组件内作为列的ng2-smart-table内呈现的子组件中的按钮。由于没有选项在我渲染的子组件的标签中添加事件监听器（我需要在标签内部进行）。这样，它只会在没有选项的情况下呈现，以提供任何属性。提前谢谢！

Answer 1

从自定义组件中捕获值

您必须在smartable设置中声明为父组件

   setting.columns.button: {
            title: 'Actions',
            filter: false,
            type: 'custom',
            renderComponent: ActionButtonComponent,
            onComponentInitFunction(instance) {
              instance.save.subscribe(row => {
                console.log(this)
              });
            }
          }

和子组件

@Component({
  selector: 'app-action-button',
  template: `
 <span ngbDropdown>
    <button class="btn btn-danger btn-raised mr-1" id="dropdownRaised4" ngbDropdownToggle>Actions</button>
    <div ngbDropdownMenu class="dropdown-menu-right" aria-labelledby="dropdownRaised4">
      <button class="dropdown-item ontop" (click)="onClick(event)">
        <i class="icon-x"></i>Cancel</button>
    </div>
  </span>`,
  styleUrls: ['./action-button.component.scss']
})
export class ActionButtonComponent implements ViewCell, OnInit {
  renderValue: string;
  @Input() value: string | number;
  @Input() rowData: any;

  @Output() save: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
    this.renderValue = this.value.toString().toUpperCase();
  }

  onClick(row) {
    this.save.emit(row);
  }


}

如何从呈现到ng2-smart-table的自定义组件（按钮）中捕获事件

1 个答案: