如果数据未在 Angular 中加载，则添加加载 html

Question

我们的应用中有很多组件。
某些组件需要来自服务器的数据，然后仅显示 html。
在没有数据到来之前，我们需要显示一些加载栏 html。

我想知道是否有任何通用的解决方案？
我可以开始将 *ngIf 放在每个组件中，但我正在考虑更通用的解决方案。

所以目前我正在考虑。

1. 创建一个指令
2. 在指令中传递对象
3. 检查内部指令是否对象可用
4. 如果它不可用，则在元素内添加一些 html。

到现在为止，下面的代码已经写好了。

@Directive({
  selector: '[appCustomLoad]'
})
export class CustomLoadDirective implements AfterViewInit{

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef,
              private renderer: Renderer,
              private el: ElementRef) {

  }

  @Input() set appCustomLoad(shouldAdd: boolean){
    // currently i am passing boolean for testing,
    // if i use this solution then i will change boolean to any.
    // and if object is not null or undefined then we will show loading bar with some msg.
    if(shouldAdd){
      this.viewContainer.createEmbeddedView(this.templateRef);
    }else{
      this.viewContainer.clear();
    }
  }

  ngAfterViewInit(): void {
    // after view init
  }
}

我无法使用指令在我的 div 中添加 html。

我不确定这是不是正确的方法，所以如果您有任何更好的解决方案，请给我一些想法。 p>

Answer 1

有一种非常简单的通用方法可以做到这一点，但它并不那么优雅。解决方案是创建一个全局的 service.loading 变量：

 serviceTest.loading = 0;

然后在你检索的数据里面加1：

serviceTest.loading++;

现在你可以创建任何你想要的加载动画

ng-if="serviceTest.loading > 0"
    //display loading gif

检索数据后将值减一

serviceTest.loading--;

您使用整数而不是布尔值的原因是您希望支持多次检索。就像那个整数应该上升到 3 并且您不希望加载在所有 3 个请求都完成之前结束。