整合 ng-busy 套件，http 呼叫可顯示資料載入中的效果

當 client 需要在 server 存取資料時候，往往會有些等待的時間。透過指示讓使用者知道正在下載中，可以增加使用者的操作體驗。

ng-busy 就是這樣的套件，主要組合包含 css：設定 [ngBusy] 顯示等待的畫面，必須要在每一個 會存取 http 的 component 中添加。

做法如下：

 

安裝

npm install --save ng-busy

將 \node_modules\angular2-busy\build\style\busy.css copy 到 wwwroot/css 下，方便後續引用：

<link href="~/css/busy.css" rel="stylesheet" />

在 app.module 中，加入

  import { NgBusyModule } from 'ng-busy';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  @NgModule({
      imports: [
      	// ...
          BrowserAnimationsModule,
          BusyModule
      ],
      // ...
  })

使用方式：

建議使用 Subscription 方案（也可以用 Promise，不過處理步驟就會有些許不同，主要看 http 如何處理）：

  import { Subscription } from 'rxjs';
  
// 在 Component 中，定義 busy 變數，並且將 subscribe 結果放入
  busy: Subscription;
  ngOnInit() {
    this.busy = this.data.getNurses(this.clinicCode).subscribe(data => this.nurses = data);
}

在 html 中，就可以直接呼叫：

<div [ngBusy]=”{busy: busy, message: ‘資料載入中…’}”></div>

 

如此就會出現下方資料載入中的內容

參考： https://github.com/victos/ng-busy

其中也包含 onBusyStop() & onBusyStart() 兩個 event，可以透過以下方式關聯：

<div [ngBusy]=“…” (busyStop)=“onBusyStop()” (busyStart)=“onBusyStart()”></div>