Question

我有一个枚举，

并希望从模板传递枚举值。这怎么可能？

export enum FIELDS {
    GENDER = <any>'Gender',
    SALUTATION = <any>'Salutation',
    FIRSTNAME = <any>'First Name',
    LASTNAME = <any>'Last Name',
    EMAIL_ADDRESS = <any>'Email Address',
    COUNTRY = <any>'Country',

}

我的模板。在这里，我想传递枚举值

 [ngClass]="{'error':validate(FIELDS.COUNTRY)}"

//抛出错误：无法获取未定义或空引用的属性COUNTRY。

我的组件：

@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>();

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

如果我在组件中正常调用FIELDS.COUNTRY，我会得到值'Country'。这就是我所需要的。

有人知道，我怎样才能传递枚举值？

提前谢谢

Answer 1

您无法直接从模板访问枚举。或者，您可以将它们复制到组件中，然后在组件中使用它。

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

我已经使用Object.assign来获取枚举对象并将其复制（对它的引用将不起作用）。现在，您可以在组件中枚举实例，也可以将其自由地用于模板。

Answer 2

只是为了更新Angular 4+版本和TypeScript 2.4及更高版本的答案。

将Enums传递给Angular组件更简单。

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

  @Input() type: PersonTypes;
}

在另一个容器中使用PersonComponent：

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

  personType = PersonTypes.MALE;
}

在视图模板中：

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

如果您需要访问所有enum属性：然后在容器应用中展开 personType = PersonTypes

并相应地使用这些属性。

Answer 3

您必须使枚举成为组件类的属性。

export class ModifyInvalidRowGeneralComponent {
    public fields: FIELDS;
    // ...

    // takes parameter of type FIELDS enum
    public validate(field: FIELDS): boolean {

在你的HTML中：

 [ngClass]="{'error':validate(fields.COUNTRY)}"

将枚举值传递给angular 2组件

3 个答案: