Pesquisa de site

typescript - É possível adicionar dinamicamente propriedades de saída a um componente Angular 2?


Estou a caminho de criar meu próprio módulo Angular 2, que chamei de angular2-actionable-table.

O objetivo deste módulo é fornecer uma tabela genérica para usar quando quisermos realizar algumas ações em alguns dados. (por exemplo: podemos usar este módulo para criar uma tabela CRUD).

Eu começo escrevendo algumas classes simples em TypeScript.

export class Column{
  constructor(public name: string) {
  }
}

export class Action {
  constructor(public name: string) {
  }
}

E a classe do componente.

import {Component, OnInit, Input} from '@angular/core';
import {Action} from "./models/action.model";
import {Column} from "./models/column.model";

@Component({
   selector: 'app-angular2-actionable-table',
   templateUrl: './angular2-actionable-table.component.html',
   styleUrls: ['./angular2-actionable-table.component.css']
})
export class Angular2ActionableTableComponent implements OnInit {

  @Input() columns: Column[];
  @Input() actions:Action[];

  constructor() { }

  ngOnInit() {

  }

}

Então o cliente deste módulo pode fazer isso

<app-angular2-actionable-table [columns]="columns" [actions]="actions"></app-angular2-actionable-table>

O que eu quero fazer no Angular2ActionableTableComponent é adicionar dinamicamente propriedades de saída de acordo com o atributo columns. Em outras palavras, digamos que o cliente tenha passado como valor de entrada este columns=[new Action('edit'), new Action('validate')]. Então, eu quero fazer algo semelhante a isso no Angular2ActionableTableComponent

for(let i=0; i<this.columns.length; i++){
  @Output() Angular2ActionableTableComponent.prototype[this.columns[i].name];
  // The syntax is wrong for sure
}

E então, depois de emitir eventos para cada ação, o cliente pode fazer isso

<app-angular2-actionable-table [columns]="columns" [actions]="actions"
    (edit)="onEdit($event)" (validate)="onValidate($event)">
</app-angular2-actionable-table>

Não tenho certeza se isso é possível no Angular 2 usando TypeScript.