最近在做一个双向折叠组件，如下图所示，页面是分为两组，左边页面是Summary Panel,主要是一组列表，右边页面是Detail Panel，展示左边列表中某一项的具体信息，我们把它记作“Middle State”。
我们还看到有“<”和“>”两组按钮，这就是我们要做的“双向折叠组件”。点击左边的“<”，Summary Panel折叠起来，Detail Panel铺满整个页面，我们把它记作“Left State”，如下图：
在Summary Panel折叠状态下，点击“>”，又回到“Middle State”。点击“>”,Detail Panel折叠起来，Summary Panel铺满整个页面，我们把它记作“Right State”，如下图：
我们通过以上的需求分析可知，
1.页面的总体布局是一个Summary的div，两个箭头buttons，一个Detail的div。
2.页面总共有三种state：“Middle”、“Left”、“Right”，有两个button：“<”和“>”，也就是两个button去控制三个state。
因此我们需要定义一个枚举来记录页面的三种状态（注意，定义枚举要用export导出，否则后面会出错）
export enum CollapseExpandState {
Middle = 1,
Left,
Right
}
页面的结构如下，并且通过一个变量_collapseExpandState去控制“left”和“right”两个button,具体为“<”会在页面状态为“Middle”和“Right”的情况下出现，“>”会在页面状态为“Middle”和“Left”状态下出现，从需求图中即可得知：
<div id="container">
<div id="summary"></div>
<div id="buttons">
<div id="left" *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Right" (click)="_onHandleLeft($event)">《</div>
<div id="right"> *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Left" (click)="_onHandleLeft($event)">》</div>
</div>
<div id="detail"></div>
</div>
这里在angular的template中用到了枚举，遭遇了一些麻烦，如果我们按上述定义了枚举，并且在Angular Component的template中用了枚举，我们会得到以下的错误提示：
TypeError: Cannot read property 'Middle' of undefined
也就是说，在Angular2的template中无法识别定义的枚举类型CollapseExpandState，这是因为你写的Angular Component的template模板的执行环境是你定义的component class，但是在class中并没有关于CollapseExpandState枚举的任何引用，所以Angular在为你的component生成模板的时候认为CollapseExpandState是undefined的。知道了原因，解决方案就很容易了，只需要在component class中加入这个枚举的引用即可：