Question

我试图在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>

我非常确定这应该很简单，但我无法在文档中找到任何有用的内容或通过Google搜索。我觉得我应该动态添加/删除叠加div，但我不确定这是否是正确的方法，甚至不知道如何做到这一点。

Answer 1

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

我们的解决方案肯定没有最干净的方法，这里大致是我们迄今为止对我们有用的方法：

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

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

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

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

Angular2：进度/加载叠加指令

1 个答案: