Question

我正在创建自己的角度2模块，我称之为 angular2-actionable-table 。

此模块的目标是提供一个通用表，以便在我们想要对某些数据执行某些操作时使用。（例如：我们可以使用此模块创建CRUD表。）

我从编写一些简单的打字稿类开始。

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

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

和组件类。

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() {

  }

}

所以这个模块的客户端可以做到这个

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

我想在 Angular2ActionableTableComponent 中做的是根据列属性动态添加输出属性。换句话说，让我们说客户端已作为输入值传递此columns = [new Action('edit'), new Action('validate')]。所以我想在 Angular2ActionableTableComponent

中做类似的事情。

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

然后在向每个动作发出事件后，客户端可以执行此操作

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

我不确定使用Typescript在Angular 2中是否可行。

是否可以动态地将输出属性添加到角度2组件？

0 个答案: