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>

虽然这适用于单个微调器实例，但如果我想通过我的应用程序在多个区域中使用此微调器，则该函数太宽泛并且如果存在多个微调器，最终会触发应用程序中的所有微调器实例同一页。

我的问题：

是否可以将对象或多个参数传递给行为主题，这样我不仅可以传递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

如果要在同一页面上使用多个微调器，我宁愿使用结构指令或微调器组件来实现此目的。请参见下面的示例： -

Angular img loading directive

Angular2: progress/loading overlay directive

Answer 2

要在BehaviorSubject中使用多个参数，您可以创建一个新类来保存参数我有一个带有加载器图标的完全相同的用例，我的应用程序是用TS for Angular 4编写的，但我想在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
}

在服务中 -

  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));
  }

在组件中实施 -

  ...  
  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));
  }
  ...

JS插件使用api -

<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>

角度2 - 具有行为主体的多个参数？

2 个答案: