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.