Come posso passare un parametro di tipo generico a un componente Angular2?

Question

Diciamo che ho avuto un componente con un ingresso di tipo parametro fisso,

@Component({ 
    selector: 'fixed', 
    template: '<div>{{value}}</div>' 
}) 
export class FixedComponent { 
    @Input() value: string; 
} 

Come posso fare per fare quel tipo di parametro generico, vale a dire

@Component({ 
    selector: 'generic', 
    template: '<div>{{value}}</div>' 
}) 
export class GenericComponent<T> { 
    @Input() value: T; 
} 

che è, come faccio a passare il tipo nel modello del componente principale?

<generic ...></generic> 

Answer 1

Sto solo giocando con angolare e ho fatto questo lavoro utilizzando ViewChild, avendo interno ed esterno dei componenti.

In dichiarazione dei componenti interni del componente è come:

@Injectable() 
@Component({ 
selector: 'inner-selector', 
templateUrl: ..., 
styleUrls: ..., 
directives: [ 
...] 
export class InnerComponent**<T>** ... 

nel componente esterno che chiamato da router che ho fatto:

import {Component} from '@angular/core'; 
import {InnerComponent} from '../components/inner.component'; 
import {ViewChild } from '@angular/core'; 

@Component({ 
    selector:  'demo-app', 
    template: '<inner-selector></inner-selector>', 
directives: [InnerComponent] 
}) 
export class TestPage { 

    @ViewChild(InnerComponent) 
    **private innerComponent:InnerComponent<MPSalesHeader>;** 
}; 

Non so questo è un buon modo, ma lavorato.

Saluti!

Answer 2

Sembra che sia possibile utilizzare parametri di tipo generico in componenti figlio Angular 2.

@Component({ 
    selector: 'app-child', 
    template: '<p>Generic Child</p><p>{{cp}}</p>' 
}) 
export class GenericChildComponent<T> { 
    @Input() cp: T; 
} 

import { GenericChildComponent } from './generic-child.component'; 
@Component({ 
    selector: 'app-root', 
    template: '<app-child [cp]="p1"></app-child><hr /><app-child [cp]="p2"></app-child>', 
    directives: [GenericChildComponent] 
}) 
export class ParentComponent { 
    p1: string = 'property 1'; 
    p2: number = 100; 
} 

Questo funziona senza ricorrere né alla tecnica ViewChild suggerito above o ad una tecnica di classe di base suggerito here.

Answer 3

Sembra che quando si utilizza AOT compilation l'unico modo per farlo è sostituire il tipo generico con "qualsiasi". Vedi https://github.com/angular/angular/issues/11057