Comment limiter les valeurs de propriété d'entrée dans un contrôle d'entrée personnalisé Angular?

J'ai un composant Angular 4 personnalisé et je souhaite limiter une propriété d'entrée à des valeurs d'énumération TypeScript valides. J'ai vu this question qui semble identique, mais je n'arrive pas à obtenir la réponse acceptée pour travailler comme je m'y attendais à travailler.Comment limiter les valeurs de propriété d'entrée dans un contrôle d'entrée personnalisé Angular?

Voici mon élément:

import { Component, Input } from '@angular/core'; 

enum MyEnum { 
    ValueInMyEnum, 
    One, 
    Two, 
    Three 
} 

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div> 
     <div>Prop1 value: {{ prop1 }}</div> 
     <div>Prop2 value: {{ prop2 }}</div> 
     <div>Prop3 value: {{ prop3 }}</div> 
     <div>Prop4 value: {{ prop4 }}</div> 
     <div>Prop5 value: {{ prop5 }}</div> 
     <div>Prop6 value: {{ prop6 }}</div> 
    </div> 
    ` 
}) 
export class MyComponent { 
    @Input() prop1: MyEnum; 
    @Input() prop2: MyEnum; 
    @Input() prop3: string 
    @Input() prop4: MyEnum; 
    @Input() prop5: MyEnum; 
    @Input() prop6: string 

}

Voici comment j'utilise mon composant:

<my-component 
     prop1="ValueInMyEnum" 
     prop2="ValueNotInMyEnum" 
     prop3="Prop3IsJustAStringType" 
     [prop4]="ValueInMyEnum" 
     [prop5]="ValueNotInMyEnum" 
     [prop6]="Prop6IsJustAStringType" 
></my-component>

Je voudrais être en mesure de fournir une valeur qui est dans le ENUM et être en mesure d'utiliser sa valeur en tant que type MyEnum dans mon code de composant, mais tout semble être indéfini. Comment puis-je fournir correctement une valeur enum dans mon composant?

Voici un plunk pour aider à démo cela.

Source

2017-09-21 Chris Farmer

Votre cas est pas tout à fait identique. True, vous utilisez des types @Input définis, mais uniquement dans l'enfant. Dans le composant parent, aucun des attributs n'est défini ou initialisé dans le parent. Pour les trois premières, vous passez simplement des chaînes pour qu'elles soient rendues telles quelles, dans trois autres les valeurs d'attribut ne sont pas reconnues par l'enfant car elles n'existent pas dans le parent – Vega

Je ne comprends pas ce que cela signifie. Je n'ai qu'un seul composant, 'my-component', et j'essaye d'assigner et d'utiliser les propriétés propX qui sont définies sur ce composant. Pourquoi voudrais-je jamais définir mes propriétés propX dans le composant parent «my-app»? –

Vous avez au moins deux composants my-app et my-component. @Input est le lien entre deux composants, il doit donc avoir une valeur définie dans le parent à transmettre à l'enfant. Lisez ici https://angular.io/guide/component-interaction#component-interaction – Vega

Dans vos app.ts importer MyEnum et utiliser une variable Auxiliar

.... 
import { MyComponent,MyEnum } from './my-component'; 
.... 
export class App { 
    IEnum=MyEnum; //<--add the variable 
    constructor() {...}

alors vous pouvez écrire

<my-component [prop4]="IEnum.ValueInMyEnum"></my-component>

Source

2017-09-21 20:50:18 Eliseo

Comment limiter les valeurs de propriété d'entrée dans un contrôle d'entrée personnalisé Angular?

Répondre

Questions connexes