Angular實(shí)現(xiàn)雙向折疊列表組件的示例代碼

最近在做一個(gè)雙向折疊組件，如下圖所示，頁(yè)面是分為兩組，左邊頁(yè)面是Summary Panel,主要是一組列表，右邊頁(yè)面是Detail Panel，展示左邊列表中某一項(xiàng)的具體信息，我們把它記作“Middle State”。

我們還看到有“<”和“>”兩組按鈕，這就是我們要做的“雙向折疊組件”。點(diǎn)擊左邊的“<”，Summary Panel折疊起來(lái)，Detail Panel鋪滿整個(gè)頁(yè)面，我們把它記作“Left State”，如下圖：

在Summary Panel折疊狀態(tài)下，點(diǎn)擊“>”，又回到“Middle State”。點(diǎn)擊“>”,Detail Panel折疊起來(lái)，Summary Panel鋪滿整個(gè)頁(yè)面，我們把它記作“Right State”，如下圖：

我們通過(guò)以上的需求分析可知，

1.頁(yè)面的總體布局是一個(gè)Summary的div，兩個(gè)箭頭buttons，一個(gè)Detail的div。

2.頁(yè)面總共有三種state：“Middle”、“Left”、“Right”，有兩個(gè)button：“<”和“>”，也就是兩個(gè)button去控制三個(gè)state。

因此我們需要定義一個(gè)枚舉來(lái)記錄頁(yè)面的三種狀態(tài)（注意，定義枚舉要用export導(dǎo)出，否則后面會(huì)出錯(cuò)）

export enum CollapseExpandState {
  Middle = 1,
  Left,
  Right
}

頁(yè)面的結(jié)構(gòu)如下，并且通過(guò)一個(gè)變量_collapseExpandState去控制“l(fā)eft”和“right”兩個(gè)button,具體為“<”會(huì)在頁(yè)面狀態(tài)為“Middle”和“Right”的情況下出現(xiàn)，“>”會(huì)在頁(yè)面狀態(tài)為“Middle”和“Left”狀態(tài)下出現(xiàn)，從需求圖中即可得知：

<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中用了枚舉，我們會(huì)得到以下的錯(cuò)誤提示：

TypeError: Cannot read property 'Middle' of undefined

也就是說(shuō)，在Angular2的template中無(wú)法識(shí)別定義的枚舉類型CollapseExpandState，這是因?yàn)槟銓?xiě)的Angular Component的template模板的執(zhí)行環(huán)境是你定義的component class，但是在class中并沒(méi)有關(guān)于CollapseExpandState枚舉的任何引用，所以Angular在為你的component生成模板的時(shí)候認(rèn)為CollapseExpandState是undefined的。知道了原因，解決方案就很容易了，只需要在component class中加入這個(gè)枚舉的引用即可：

@component(...)
export class ContainerWidget {
  public CollpaseExpandState: any = CollapseExpandState;
}

我們通過(guò)枚舉狀態(tài)來(lái)控制了兩個(gè)buttons是否在恰當(dāng)?shù)捻?yè)面狀態(tài)顯示與否，但是即使是同一個(gè)buttons，在不同的頁(yè)面狀態(tài)下所用到的樣式也會(huì)不同，這里的樣式其實(shí)最主要的就是位置了。我們先來(lái)考慮如何去控制button的樣式，再來(lái)考慮如何去正確定位不同頁(yè)面狀態(tài)下button的位置。

對(duì)于控制button的樣式，我們需要控制三個(gè)樣式："left button"、"right button"還有“buttons”。能夠想到有三種方案：

I、用ng-class

ng-class一般的用法如下：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

因此它需要用boolean去控制，每一種樣式需要一個(gè)boolean去控制，left和right各有兩種樣式，buttons有三種樣式，這樣就需要用5個(gè)boolean去控制，略顯麻煩。

II、 用ElementRef.nativeElement.className

分別在buttons、left和right上用模板變量，然后在class中定義：

@ViewChild("buttons") buttons: ElementRef;
@ViewChild("left") left: ElementRef;
@ViewChild("right") right: ElementRef;

在處理函數(shù)中這樣去給class賦值從而改變樣式：

this.left.nativeElement.className = "XXXXX";

這樣的話，我們需要從元素的角度出發(fā)，只需要3個(gè)元素變量，從而改變?cè)厣系腸lassName即可。但是這樣做有個(gè)隱患，注意到我們是用的ngIf來(lái)控制left和right在不同狀態(tài)下是否存在，因?yàn)槊恳淮问录幚矶夹枰獙?duì)三個(gè)元素的樣式進(jìn)行賦值，但是如果某個(gè)頁(yè)面狀態(tài)下ngIf為false從而元素不存在，那么就會(huì)報(bào)“Null Pointer”的錯(cuò)誤，所以如果所引用的元素受到了ngIf的控制，不確定是否一定存在的情況下，要慎用該方法為元素賦予樣式。

III、 用class="{{}}"

為了II中的尷尬，我們采用在HTML元素上對(duì)class進(jìn)行直接賦值的方式，但是需要借用插值表達(dá)式{{}}。我們?cè)赾ss中用class的形式定義好樣式，并且在compoennt class中定義三個(gè)字符串變量記錄className，然后在事件處理函數(shù)中把相應(yīng)的className賦予變量即可。這樣我們就不用擔(dān)心元素是否存在而導(dǎo)致的空指針了。

考慮完如何控制樣式，下面我們進(jìn)入CSS樣式的討論，這里其實(shí)主要考慮的就是位置。

我們采用flex布局，從左到右依次排列Summary Panel, buttons和Detail Panel。我們希望Buttons向左移，但是空出的位置被Detail Panel來(lái)填充。首先來(lái)看一下不設(shè)樣式的效果圖：

顯然buttons是占據(jù)了文檔流的位置的，如果這時(shí)候我們用relative定位buttpms，并且設(shè)置left的值為-74px（注意到left為負(fù)數(shù)就會(huì)把元素往左推）：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  left: -74px;
}

效果圖為：

發(fā)現(xiàn)如果用left的話，buttons原來(lái)的文檔流位置依然存在，只是buttons相對(duì)于原來(lái)的位置移動(dòng)了一定的位移。

如果我們用margin-left來(lái)設(shè)置呢：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  margin-left: -74px;
}

效果圖為：

它和left不同之處在于，left會(huì)留住原來(lái)的文檔流位置，但是用margin-left原來(lái)的文檔流位置會(huì)消失，而由后面的元素補(bǔ)充過(guò)來(lái)，而我們想要的效果，正好是用margin-left來(lái)實(shí)現(xiàn)的。

所以用CSS定位的時(shí)候，要明白left和margin-left的區(qū)別，從而選擇正確的方式來(lái)定位。

總結(jié)一下，從這個(gè)案例中我們學(xué)習(xí)到了：

1. 雙向折疊可以用“3種頁(yè)面狀態(tài)去控制2個(gè)按鈕”來(lái)實(shí)現(xiàn)
2. enum在Angular Component的template中用到時(shí)，需要在compnent class中添加它的引用
3. 控制元素樣式有很多方法，要選擇合適的方法
4. CSS定位中l(wèi)eft和margin-left雖然都能把元素推向左邊，但是left保留原來(lái)文檔流位置，margin-left不保留原來(lái)文檔流位置。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。