Angular2：进度/加载覆盖指令答案

【问题标题】：Angular2: progress/loading overlay directiveAngular2：进度/加载覆盖指令
【发布时间】：2016-06-02 06:16:46
【问题描述】：

我正在尝试在 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>`
})
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，但我不确定这是否是正确的方法，甚至不确定如何去做。

【问题讨论】：

样式有什么问题？指令没有视图，因此我认为这不是正确的方法。
加载叠加层（组件，因此是工作版本）有一些填充/边距以将其插入到包含的 div 中，如果在一种情况下它是一个应该被覆盖的大表，则很难做到这一点有时只有一个狭窄的侧边栏。所以我的想法是把它变成一个指令，只填充指令应用到的整个 div，这是我无法工作的。
如果你认为你可以用指令来做到这一点，为什么你认为你不能用组件呢？使用指令完成后，预期结果会有何不同。你认为指令可以实现组件不能实现的什么？

标签： javascript html angular

【解决方案1】：

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

我们的解决方案肯定不是最干净的方法，这大致是我们迄今为止所做的对我们很有效的方法：

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

对于定位，我们使用简单的容器元素：0x0px 的容器元素定位在父级（相对）的 pos 0/0 处，内部有真正的叠加层（定位固定，如上所述动态设置大小）。

对于填充/边距，我目前不确定是否需要进行大量修复，我认为通过查询父元素来解决这个问题应该不会太难。

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

【讨论】：