Saltar al contenido

Pase el valor de enumeración al componente angular 2

Solución:

Solo para actualizar la respuesta para las versiones de Angular 4+ y TypeScript 2.4 y superior.

Pasar Enums a componentes angulares es mucho más sencillo.

 export enum PersonTypes {
  MALE = 'male',
  FEMALE = 'female'
}
@Component({
  selector: 'app-person-info'
})
export class PersonComponent implements OnInit {

  @Input() type: PersonTypes;
}

Usando PersonComponent en otro contenedor:

@Component({
  selector: 'app-container'
})
export class AppContainerComponent implements OnInit {

  personType = PersonTypes.MALE;
}

En la plantilla Ver:

<app-person-info [type]="personType"></app-person-info>

En caso de que necesite acceder a todos los enum propiedades: luego, en la aplicación contenedora, expanda personType = PersonTypes

Y use las propiedades en consecuencia.

No puede acceder a las enumeraciones directamente desde su plantilla. Alternativamente, puede copiarlos en su componente y luego usarlo en su componente.

@Component({
  selector: 'row-general',
  template: require('./modify-invalid-row-general.component.html'),
  styleUrls: ['./app/nedit/modify-invalid-row/modify-invalid-row.component.css']
})
export class ModifyInvalidRowGeneralComponent {

  @Input() row: UploadRow;
  @Input() columns: ConfigColumn[];

  @Output() validateRow = new EventEmitter<UploadRow>();

  FILEDS:any=Object.assign({},FIELDS);

  public validate(field: string): boolean {

    let invalidFields: string[] = [];
    if (this.row.invalidFields != null)
      invalidFields = this.row.invalidFields.split(';');
    for (let i = 0; i < invalidFields.length; i++) {
       if (invalidFields[i].trim() == field.trim())
        return true;
    }
    return false;
  }

He usado Object.assign para tomar el objeto enum y copiarlo (la referencia no funcionará). Ahora tiene su instancia de enumeración en su componente y también puede usarla libremente en su plantilla.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *