不知道如何使用 angular2 类中的接口实现枚举

问题描述

在这里兜兜转转.对 Typescript 来说非常新，它会因琐碎的实现而引起严重的头痛.

Going around in circles here. Very new to Typescript and it's causing major headaches with trivial implementations.

如何在 AgentStatusService 中定义它应该有一个名为 ['offline','available','busy','away'] 的 4 个选项的数组?AgentStatus 已定义(或者是吗?)，我将其注入 AgentStatusService.

How do a define in AgentStatusService that it should have an array of 4 options called ['offline','available','busy','away'] ? AgentStatus is defined ( or is it? ) and I am injecting it into the AgentStatusService.

Microsoft Visual Studio Code 在第 21 行出现异常，其中类型typeof AgentStatus"不可分配给类型AgentStatus"......为什么?

Microsoft Visual Studio Code is barfing on line 21 where the type 'typeof AgentStatus' is not assignable to type 'AgentStatus'... why?

更新:

import { EventEmitter, Injectable } from '@angular/core';

export enum AgentStatus {
    available =1 ,
    busy = 2,
    away = 3,
    offline = 0
}

export interface IAgentStatusService {
    state: number
    states: AgentStatus
}
@Injectable()
export class AgentStatusService implements IAgentStatusService {

    state:number;  // this really should be string, but line 22 returns a number
    states:AgentStatus;

    constructor(states:typeof AgentStatus = AgentStatus){
        // unreacheable code browser_adapter.ts:78EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'isSkipSelf' of null
        // absolutely impossible to debug...
        this.state = AgentStatus.offline // this returns a number
    }

    //   set state(state:string){
    //       try{
    //       this._state = this.states[state];
    //       // string 


    //       } catch(e){
    //           console.log('tried setting bad enum value on AgentStatus', e.stack);
    //       }
    //   }

    //   get state():string{
    //       return this._state; 
    //   }

    //   get model():any {
    //     return this.states;    
    //   }
}

比较这个实现满足angular2:

Compare with This implementation satisfies angular2:

@Injectable()
export class AgentStatusService {
    public states = ['offline','available','busy','away'];
    private _state;

    constructor(){
        this._state = this.states[0];
    }

    set state(state:string){
        try{
        this._state = this.states[state];
        } catch(e){
            console.log('tried setting bad enum value on AgentStatus', e.stack);
        }
    }

    get state():string{
        return this._state; 
    }

    get model():any {
        return this.states;    
    }
}

推荐答案

在这里你想要什么并不明显，但让我解释一些事情......

It's not obvious what you want here, but let me explain a few things...

我创建了一篇关于此的博客文章:
如何使用 TypeScript 枚举，尤其是 Angular 2+
但我会在此处内嵌所有信息:

I have created a blog post talking about this:
How to use TypeScript Enums, especially with Angular 2+
But I'll include all the information inline here:

枚举只是一个对象.你的枚举在 JavaScript 中是这样写的:

A enum is just an object. Your enum is written something like this in JavaScript:

{
    0: "offline",
    1: "available",
    2: "busy",
    3: "away",
    available: 1,
    busy: 2,
    away: 3,
    offline: 0
}

打字的好处在枚举中非常有限.

The benefit from typing is very limited in enums.

此行有效:

var value = <AgentStatus>"offline";

但它没有用，因为

value == AgentStatus.offline // <- false, because it's "offline" == 0

因此，您应该始终将您的值存储为数字，您可以通过以下方式获取:

So, you should always store your values as numbers, which you can obtain as follows:

如何将字符串转换为枚举

var value = AgentStatus["offline"]; // so value is now 0

// You can also use this, which only gives IDE hints, no runtime benefit
var value: AgentStatus = AgentStatus["offline"];

这使得之前的比较有效:

This makes the previous comparison work:

value == AgentStatus.offline // <- true, because it's 0 == 0

现在，还有几个问题:

如何得到等价的字符串?

AgentStatus.offline // 0
AgentStatus[AgentStatus.offline] // -> AgentStatus[0] -> "offline"

如何获得所有可能的枚举值?

var options : string[] = Object.keys(AgentStatus);
// The options list has the numeric keys, followed by the string keys
// So, the first half is numeric, the 2nd half is strings
options = options.slice(options.length / 2);

问题

如果你在模板中写这个:

If you write this in your template:

{{AgentStatus[myValue]}}

它会失败，因为它无法访问导入的类型(稍后由 Angular 执行).

It will fail, because it doesn't have access to imported types (it gets executed later by Angular).

要使其工作，您的组件需要引用枚举类型/对象，例如:

To make it work, your component will need to have a reference to the enum type / object, something like:

export class MyComponent {
    // allows you to use AgentStatus in template
    AgentStatus = AgentStatus;        

    myValue : AgentStatus;
    // ...
}

可运行的演示

这是一个例子，解释了我在这里指出的一切:

Here is an example that explains everything I pointed in here:

http://plnkr.co/edit/vOeeDrCI6CmsXdWaMtwG?p=preview

查看文件:app/app.component.ts.

这篇关于不知道如何使用 angular2 类中的接口实现枚举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！