How can I create a generic component in Angular 2/Typescript that is capable of creating an instance of the generic-type?
@Component({
selector: 'generic',
template: 'generic.html'
})
export class GenericComponent<T> {
private array: T[];
addElement() {
const object = new T();
this.array.push(object);
}
}
Currently I get an error message saying:
TS2693: 'T' only refers to a type, but is being used as a value here.
Furthermore, I should be able to specify the type somehow:
<generic ...></generic>
Generics are erased at compile-time so you can't use the type argument T
to create a new instance of T
. You can however pass is a constructor of T
to the class:
export class GenericComponent<T> {
// Take the constructor of T to the component constructor
constructor(private ctor: new ()=> T) {}
private array: T[];
addElement() {
const object = new this.ctor();
this.array.push(object);
}
}
class Item {}
class ItemComponent extends GenericComponent<Item>{
constructor(){
super(Item) // Pass in the constructor of the concrete type
}
}
A working solution can be:
@Component({
selector: 'generic',
template: 'generic.html'
})
export class GenericComponent<T> {
private array: T[];
@Input() creator: { new (): T; };
addElement() {
const object = new this.creator;
this.array.push(object);
}
}
@Component({
selector: 'parent',
template: '<generic [creator]="itemCreator" [array]="someArray"></generic>'
})
export class ParentComponent {
private someArray: Item[];
@Input() itemCreator: { new (): Item; };
constructor() {
this.itemCreator = Item;
}
ngOnInit() {
this.someArray = [];
}
}
class Item {}
In this case, I should be able to use the generic-component for all array-like objects.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.