javascript - Angular 2 : progress/loading overlay directive

Question

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

我有一个可行的解决方案:

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

和用法:

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

到目前为止还不错，但是很难针对不同的用例设置正确的样式，主要是为了使边距/填充在不同的容器中看起来不错。

所以我想把这整件事变成一个属性指令，如下所示:

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

我很确定这应该很容易，但我无法在文档中或通过谷歌搜索找到任何有用的信息。感觉我应该动态添加/删除覆盖 div，但我不确定这是否是正确的方法，甚至不确定如何去做。

Answer 1

我们在一个项目中创建了类似的东西，但是我们坚持使用元素指令方法。不确定将其转换为指令是否/可以获得什么好处。我认为这甚至会让事情变得更难。

我们的解决方案肯定不是最干净的方法，以下是我们所做的到目前为止对我们来说效果很好的大致方法:

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

为了定位，我们使用简单的容器元素，其中 0x0px 定位在父级(相对)的 pos 0/0 处，其中有真正的覆盖层(位置固定，大小动态设置，如上所述)。

对于填充/边距，我目前不确定我们是否必须做很多修复，我认为通过查询父元素来解决这个问题应该不会太难。

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