Is it possible to dynamically add output properties to an angular 2 component?
I am on my way to create my own angular 2 module which I called angular2-actionable-table .
The goal of this module is to provide a generic table to use when we want to make some actions on some data. (for example: we can use this module to create a CRUD table).
I begin with writing some simple typescript classes.
export class Column{
constructor(public name: string) {
}
}
export class Action {
constructor(public name: string) {
}
}
And the component class.
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() {
}
}
So the client of this module can make this
<app-angular2-actionable-table [columns]="columns" [actions]="actions"></app-angular2-actionable-table>
What I want to do in the Angular2ActionableTableComponent is to dynamically add output properties according to the columns attribute. In other words, let's say the client has passed as input value this columns = [new Action('edit'), new Action('validate')] . So I want to make something similar to this in the Angular2ActionableTableComponent
for(let i=0; i<this.columns.length; i++){
@Output() Angular2ActionableTableComponent.prototype[this.columns[i].name];
// The syntax is wrong for sure
}
And then after emitting events to each action, the client can do this
<app-angular2-actionable-table [columns]="columns" [actions]="actions"
(edit)="onEdit($event)" (validate)="onValidate($event)">
</app-angular2-actionable-table>
I am not sure if this is possible in Angular 2 using Typescript.
链接地址: http://www.djcxy.com/p/40696.html