@component(...)
export class ContainerWidget {
public CollpaseExpandState: any = CollapseExpandState;
}
我们通过枚举状态来控制了两个buttons是否在恰当的页面状态显示与否，但是即使是同一个buttons，在不同的页面状态下所用到的样式也会不同，这里的样式其实最主要的就是位置了。我们先来考虑如何去控制button的样式，再来考虑如何去正确定位不同页面状态下button的位置。
对于控制button的样式，我们需要控制三个样式："left button"、"right button"还有“buttons”。能够想到有三种方案：
I、用ng-class
ng-class一般的用法如下：
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
因此它需要用boolean去控制，每一种样式需要一个boolean去控制，left和right各有两种样式，buttons有三种样式，这样就需要用5个boolean去控制，略显麻烦。
II、 用ElementRef.nativeElement.className
分别在buttons、left和right上用模板变量，然后在class中定义：
@ViewChild("buttons") buttons: ElementRef;
@ViewChild("left") left: ElementRef;
@ViewChild("right") right: ElementRef;
在处理函数中这样去给class赋值从而改变样式：
this.left.nativeElement.className = "XXXXX";
这样的话，我们需要从元素的角度出发，只需要3个元素变量，从而改变元素上的className即可。但是这样做有个隐患，注意到我们是用的ngIf来控制left和right在不同状态下是否存在，因为每一次事件处理都需要对三个元素的样式进行赋值，但是如果某个页面状态下ngIf为false从而元素不存在，那么就会报“Null Pointer”的错误，所以如果所引用的元素受到了ngIf的控制，不确定是否一定存在的情况下，要慎用该方法为元素赋予样式。
III、 用class="{{}}"
为了II中的尴尬，我们采用在HTML元素上对class进行直接赋值的方式，但是需要借用插值表达式{{}}。我们在css中用class的形式定义好样式，并且在compoennt class中定义三个字符串变量记录className，然后在事件处理函数中把相应的className赋予变量即可。这样我们就不用担心元素是否存在而导致的空指针了。
考虑完如何控制样式，下面我们进入CSS样式的讨论，这里其实主要考虑的就是位置。
我们采用flex布局，从左到右依次排列Summary Panel, buttons和Detail Panel。我们希望Buttons向左移，但是空出的位置被Detail Panel来填充。首先来看一下不设样式的效果图：