如何使用Angular 4中的组件打字稿中的loader类激活div标签

Question

我在HTML模板中包含了装载器类的div标签组件。加载器在页面加载时处于活动状态，一旦从服务器检索数据，加载器就会被隐藏，如下所示：

<div class="loader" *ngIf="!loadedData"></div>

一旦我点击验证按钮，我想反应加载程序。

如何在单击按钮的方法中执行此操作。

提前致谢

Answer 1

当loadedData设置为false时，会显示div。所以当从服务器检索数据时，只需要一个简单的qazxsw poi。

要明确：

this.loadedData = false

.html

<button (click)="buttonClickHandler()">Enable loader</button>

.ts

Answer 2

这段代码对我有用：

组件HTML：

  //Assuming that you do the job in the onInit

  buttonClickHandler(){
    this.loadedData = false;
  }

这个加载变量将<div id="loader" class="loader" [hidden]="loading"></div> 作为默认值，一旦数据加载，它需要false

组件打字稿：

true

styles.css的：

showLoader(){
    let divLoader = document.getElementById('loader');
    console.log("this is the div ",divLoader);
    divLoader.removeAttribute("hidden");
    divLoader.classList.add("show-loader");
}