Question

我有这个简单的HTML

<body>
 <app-root></app-root>
</body>

我想使用Material创建一个加载叠加层： https://material.angular.io/cdk/overlay/overview

我应该这样做：

<body>
  <div id="foo" class="xyz">
    <app-root></app-root>
  </div>
</body>

只需在id =“foo”的div上切换类？我无法弄清楚如何覆盖Material2方式，任何人都知道吗？

Answer 1

这家伙的帖子在这里： https://hassantariqblog.wordpress.com/2017/03/22/angular2-using-custom-loader-spinner-as-service-in-angular-2-application/

有所有答案。

我个人有一个主要的活动巴士服务。所以把displayOverlay()方法放在他们的。否则他的步骤完全正确，并且工作正常。

基本上，您使用router-outlet执行此操作：

<router-outlet>
  <span *ngIf="showLoader" class="loading"></span>
</router-outlet>

然后在控制上述html的组件中，执行以下操作：

constructor(private mds: MainDataService, private ref: ChangeDetectorRef) {

    const self = this;
    let to;

    this.mySub = this.mds.status.subscribe((val: boolean) => {
      self.showLoader = val;
      clearTimeout(to);
      to = setTimeout(function () {
        self.ref.detectChanges();
      }, 100);
    });

  }

所以在您的主数据总线服务中，只需致电：

  displayOverlay(value: boolean) {
    this.status.next(value);
  }

不可否认，“status”不是正确的属性名称，但我会将其保留为与文章中的示例相同的名称。

使用Material2创建加载/微调器覆盖

1 个答案: