Angular 2 - 具有行爲主體的多個參數？

Question

我創建了一個行爲主題，用於在應用程序中切換加載微調器圖標。

服務：

// Observe our loader status 
public loaderStatus: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); 

/** 
* Toggle the loading indicator status 
* @param value 
*/ 
displayLoader(value: boolean) { 
    this.loaderStatus.next(value); 
} 

組件：

this._massEmpService.displayLoader(true); // Toggle true/false 

HTML：

<div *ngIf="objLoaderStatus" class="loader" align="center"> 
    <img src="images/loading-bars.svg" alt="" /> 
</div> 

雖然這只是正常的一個單一的spinner實例，如果我想通過我的應用程序在多個區域使用此spinner，則該函數過於寬泛，如果同一頁面上存在多個spinner，則最終會觸發應用中的所有spinner實例。

我的問題：

是否有可能一個對象或多個PARAMS傳遞給行爲主體，這樣我不僅可以通過enabled/disabled狀態，但也有一些類型的元素ID，所以我可以控制哪些微調我想展示。

實例目標：

<div *ngIf="objLoaderStatus && spinnerID == 'home'" class="loader" align="center"> 
    <img src="images/loading-bars.svg" alt="" /> 
</div> 

<div *ngIf="objLoaderStatus && spinnerID == 'search'" class="loader" align="center"> 
    <img src="images/loading-bars.svg" alt="" /> 
</div> 

函數調用：

this._massEmpService.displayLoader(true, 'search'); 

最新最好的方式去這樣做呢？我是否需要製作第二個行爲主題才能保留我想參考的微調器的elementID？

Answer 1

如果你想在同一頁面上使用多個spinners，我寧願使用一個結構指令或者一個spinner組件來達到這個目的。請參見下面的xample： -

Angular img loading directive

Angular2: progress/loading overlay directive

Answer 2

要在BehaviorSubject使用多個參數，你可以創建一個新的類來保存參數。
我的加載程序圖標幾乎完全相同，我的應用程序使用的是用於Angular 4的TS，但我想在JS中公開用於插件的客戶端API。
你可以看到在此處詳細瞭解實施 -
https://github.com/savantly-net/sprout-platform/tree/development/web/sprout-web-ui/src/app/client-api

裝載程序選項定義 -

export class LoaderOptions { 
    key: string; 
    element: Element 
} 

在服務 -

... 
    showLoader = function (options: LoaderOptions) { 
    if (options == null) { 
     return; // probably just initialized, so return silently 
    } 
    if (!options.key) { 
     throw new Error('A key is required to show the loader, so that it may be removed with the same key.'); 
     } 
     const defaultElement = document.querySelector('my-client-api'); 
     options.element = options.element || defaultElement; 

     const imgWrapper = document.createElement('div'); 
     imgWrapper.setAttribute('id', options.key); 
     imgWrapper.setAttribute('style', 'text-align:center;'); 

     const imgElement = document.createElement('img'); 
     imgElement.setAttribute('style', 'width:200px;'); 
     imgElement.setAttribute('src', './img/loader.svg'); 

     imgWrapper.appendChild(imgElement); 
     options.element.appendChild(imgWrapper); 
    }; 

    hideLoader = function (options: LoaderOptions) { 
    if (options == null) { 
     return; // probably just initialized, so return silently 
    } 
    if (!options.key) { 
     throw new Error('A key is required to remove the loader'); 
    } 
    const imgWrapper = document.querySelector('div#' + options.key); 
    imgWrapper.remove(); 
    }; 

    ngAfterViewInit() { 
    this.sproutApi.toastSubject.subscribe(options => this.handleToast(options)); 
    this.sproutApi.showLoaderBehavior.subscribe(options => this.showLoader(options)); 
    this.sproutApi.hideLoaderBehavior.subscribe(options => this.hideLoader(options)); 
    } 
    ... 

-

showLoaderBehavior = new BehaviorSubject<LoaderOptions>(null); 
    hideLoaderBehavior = new BehaviorSubject<LoaderOptions>(null); 

    showLoader(options: LoaderOptions) { 
    this.zone.run(() => this.showLoaderBehavior.next(options)); 
    } 

    hideLoader(options: LoaderOptions) { 
    this.zone.run(() => this.hideLoaderBehavior.next(options)); 
    } 

在組件實現

使用API​​的JS插件 -

<script type="text/javascript"> 
    function Shack() { 

     var processInfoElement = document.querySelector('.shack-processes'); 

     this.loadProcessInfo = function(){ 
      var loaderKey = 'pLoader'; 
      sprout.showLoader({key: loaderKey}); 
      sprout.zone.run(function(){ 
       sprout.http.get('./rest/modules/shack/processes', {responseType: 'text'}).subscribe(function(response){ 
        processInfoElement.innerHTML = response; 
        sprout.hideLoader({key: loaderKey}); 
       }); 
      }); 
     }; 


    } 
    window.shack = new Shack(); 
</script>