web-dev-qa-db-fra.com

Comment passer un paramètre de type générique à un composant Angular2?

Disons que j'ai un composant avec un type de paramètre d'entrée fixe,

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

Comment dois-je procéder pour rendre ce type de paramètre générique, c'est-à-dire.

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

Autrement dit, comment puis-je passer le type dans le modèle du composant parent?

<generic ...></generic>
angularangular2-template
15
Thorsten Westheider

Il semble que vous puissiez utiliser des paramètres de type génériques dans Angular 2 composants enfants.

@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;
}

Cela fonctionne sans recours à la technique ViewChild suggérée ci-dessus ou à une technique de classe de base suggérée ici .

2
CalvinDale

Il semble que lorsque vous utilisez compilation AOT la seule façon de le faire est de remplacer le type générique par 'any'. Voir https://github.com/angular/angular/issues/11057

2
Aaron S

Je joue juste avec angular et j'ai fait fonctionner cela en utilisant ViewChild, en ayant des composants internes et externes.

Dans le composant interne, la déclaration du composant est comme:

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

dans le composant externe qui a appelé par le routeur, j'ai fait:

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>;**
};

Je ne sais pas si c'est un bon moyen, mais cela a fonctionné.

Cordialement!

1
MRsa