Angular 2将枚举从HTML传递给组件函数答案

【问题标题】：Angular 2 Pass Enum to Components Function from HTMLAngular 2将枚举从HTML传递给组件函数
【发布时间】：2016-02-12 20:26:01
【问题描述】：

我创建了一个枚举来根据它是添加还是编辑模式打开一个模式。

enum ModalTypes {
    Add,
    Edit
}

public openManageModal(type: ModalTypes) {
    if (type == ModalTypes.Add) {
        //Open edit modal
    }
    else {
        //Open add modal
    }
}

我似乎无法弄清楚如何从 HTML 中调用它。我尝试了各种方法，例如 openManageModal('Add')，但似乎没有任何效果。显然我可以在组件中创建一个函数，并将字符串解析为一个枚举，但我认为这种方式会更合适。任何帮助，将不胜感激。

谢谢

【问题讨论】：

标签： enums typescript angular

【解决方案1】：

你应该可以这样调用函数：

openManageModal(0) // for ModalTypes.Add
openManageModal(1) // for ModalTypes.Edit

enum 声明将被 TypeScript 编译器转换为以下内容：

var ModalTypes;
(function (ModalTypes) {
    ModalTypes[ModalTypes["Add"] = 0] = "Add";
    ModalTypes[ModalTypes["Edit"] = 1] = "Edit";
})(ModalTypes || (ModalTypes = {}));

所以它基本上创建了一个如下所示的对象：

{
    0: "Add",
    1: "Edit",
    Add: 0,
    Edit: 1
}

如您所见，ModalTypes.Add == 0 和 ModalTypes.Edit == 1。

【讨论】：

是的！这就像一个魅力。谢谢。我希望有一种方法可以通过名称而不是 int 来引用。不过这对我有用。
@aoakeson，我认为你最好使用字符串：openManageModal('add') 和 if(type === 'add') {...}。
我同意@aoakeson 的观点，如果能按名字引用就好了。使用字符串显然是一种更清晰的解决方法，但忽略了使用枚举的意义。