Angular2：进度/加载覆盖指令 [英] Angular2: progress/loading overlay directive

问题描述

我试图在Angular2中创建一个加载指示器/覆盖图，以便将其添加到任何容器div。当像 isLoading 这样的动态布尔属性发生变化时，它应该使div变灰并显示旋转指示符，并在属性变回之后再次消失。

我得到了一个可行的解决方案：

  @Component（{
 selector：'loading 'overlay'，
 styleUrls：['...']，
 template：`
< div class =bg-loading* ngIf =isLoading> 
< h3>< span class =glyphicon glyphicon-refresh spinning>< / span>< / h3> 
< / div>`
} class LoadingOverlay {
 @Input（）
 isLoading：boolean; 
} 
  

和用法：

 < DIV> <！ - 无论什么时候的容器 - > 
< loading-overlay [isLoading] =dynamicProp>< / loading-overlay> 
 <！ -   - 其他内容 - > 
< / div> 
  

到目前为止还不错，但对于不同用例的样式来说，使边缘/边框在不同的容器中看起来很好。

所以我想把整个东西变成一个属性指令，如下所示：

 < div loading-overlay =dynamicProp> <！ - 无论什么时候的容器 - > 
 <！ -   - 内容...  - > 
< / div> 
  

我很确定这应该很简单，但我找不到任何有用的文档或通过谷歌搜索。这感觉就像我应该动态地添加/删除覆盖div，但我不知道这是否是正确的方法，甚至不知道如何去做。

解决方案方案

我们在一个项目中创建了类似的东西，但是我们坚持使用元素指令方法。
不知道您将通过将其转换为指令获得哪些好处。我认为它甚至会让它变得更难。

我们的解决方案当然没有最干净的方法，下面是我们迄今为止对我们运作良好的大致情况：

当组件状态切换为正在显示时，组件将检查其父元素的大小信息（高度/宽度）并将这些值应用于其自身。

对于定位，我们使用simple：container-element与位于parent（relative）的pos 0/0的0x0px，里面有真正的覆盖图（位置固定，大小按照描述动态设置上面）。

对于填充/保证金，我目前不确定是否需要做很多修复，我认为应该不会太困难通过查询父元素。

在显示组件后我们甚至重新调用了计算大小方法几次：原因是我们想要的元素重叠有时会在加载过程中改变其大小。
想象一下，例如一个表格（有3行），重新加载，扩展到6行，但由于某种原因，我们没有加载，所以覆盖层应该仍然显示，但我们希望覆盖层自动覆盖这些新的添加的行也是如此。

I'm trying to create a loading indicator/overlay in Angular2 that I can add to any container div. When a dynamic boolean property like isLoading changes, it should grey out the div and show a spinning indicator, and disappear again after the property changes back.

I got a working solution:

@Component({
  selector: 'loading-overlay',
  styleUrls: ['...'],
  template: `
        <div class="bg-loading" *ngIf="isLoading">
          <h3><span class="glyphicon glyphicon-refresh spinning"></span></h3>
        </div>`
})
export class LoadingOverlay {
  @Input()    
  isLoading: boolean;
}

And usage:

<div> <!-- container for whatever -->
  <loading-overlay [isLoading]="dynamicProp"></loading-overlay>
  <!-- ... other content -->
</div>

So far so good, but this is hard to get right with styling for different use cases, mostly to make the margins/paddings look good in different containers.

So I want to make this whole thing into an attribute directive like so:

<div loading-overlay="dynamicProp"> <!-- container for whatever -->
  <!-- content ... -->
</div>

I'm pretty sure this should be easy, but I can't find anything useful in the docs or via googling. It feels like I should dynamically add/remove the overlay div, but I'm not sure if this is the right approach, or even how to do it.

解决方案

We created a similar thing in a project, however we stuck to the element-directive approach. Not sure if/what benefits you would get by converting it to a directive. I think it would even make it harder.

Our solution was for sure no the cleanest approach, here's roughly what we did which worked well for us so far:

When the components state toggles to "is showing" the component will inspect its parent element for size information (height/width) and apply these values to itself.

for positioning we use the simple: container-element with 0x0px positionioned at pos 0/0 of the parent (relative), inside that there is the real overlay (positioned fixed, size set dynamically as described above).

For padding/margin i'm currently not sure if we had to do lots of fixes, i think it shouldn't be too difficult to get around that by querying the parent element.

We even re-called our "calculate size" method a few times after the component is shown: the reason is that the element which we wanted to overlay sometimes changed its size during the loading process. Imagine for example a table (has 3 lines), gets reloaded, expands to 6 lines but for some reason we aren't done loading so the overlay should still be shown, but we want the overlay to automatically cover these newly added lines as well.

这篇关于Angular2：进度/加载覆盖指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！