Question

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

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

所以目前我在想。

制定一项指令
在指令
检查内部指令是否有对象
如果它不可用，则在元素内添加一些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。

如果你有任何更好的解决方案，我不确定这是否正确，那么请给我一些想法。

Answer 1

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

 serviceTest.loading = 0;

然后在检索数据时将数量增加1：

serviceTest.loading++;

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

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

检索数据后，将值减少一个

serviceTest.loading--;

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

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

1 个答案: