Angular 2 ng2-智能表:issue while catch the data from custom button event

标签 angular ng2-smart-table

我已经浏览了 ng2-smart 表,我已经创建了文档中提到的列,以实现列单元格上的功能 我已关注以下链接 https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts

但是我无法在其他组件中捕获 ButtonViewComponent 中提到的事件。

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
import {Routes, RouterModule, Router} from '@angular/router';
import {Observable} from "rxjs";
@Component({
    selector: 'button-view',
    template: `
    <a (click)="onClick()">{{ renderValue }}</a>
  `,
})
export class ButtonViewComponent implements ViewCell, OnInit {
    renderValue: string;

    @Input() value: string | number = '';
    @Input() rowData: any='Hello';

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

    ngOnInit() {
        this.renderValue = this.value.toString().toUpperCase();
    }
    constructor(private router: Router){

    }
    onClick() {
        this.save.emit(this.rowData);
        console.log('emit data');
// Here i want to catch this event in other component!!
    }


}

@Note:我已尝试使用@Input和@Output但仍然无法捕获事件 提前致谢!!

最佳答案

假设您已在父组件中声明了列,则可以使用 onComponentInitFunction() 函数访问子组件的事件。例如

{
  title: "Actions",
  type: "custom",
  renderComponent: ButtonViewComponent,
  onComponentInitFunction :(instance) => {
    instance.save.subscribe(row => {
     //now you can access value from child component here
  });
 }
};

关于 Angular 2 ng2-智能表:issue while catch the data from custom button event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45355252/

相关文章:

angular - 以编程方式更新 [placeholder] Reactive Form Control

angular - 如何更改 ng2 智能表列宽?

angular - 使用 EventEmitter 传递参数

angular - 测试组件方法调用另一个方法

angular - ng2-smart-table 中的复选框

NG2-智能表单细胞造型

angular - 如何删除 ng2-smart-table 中的一行

angular6 - ./node_modules/ng2-completer/esm5/ng2-completer.js 模块未找到 : Error

forms - 输入类型编号 "only numeric value"验证

angular - Material Angular Accordion 标题/标题高度