Question

我正在尝试在我的应用程序中使用微调器，因为有很多数据需要时间来加载。但这是问题所在。我已将此链接作为参考 -

Pre-Bootstrap Loading Screen For Angular2

但是旋转器一直持续着，占据了桌子的固定位置，当数据完全加载时它不会消失。在上面的文章中，他们提到了使用

 <app></app>

或

 <my-app></my-app> 

 (or probably 

 <app-root></app-root> 

  also)

Angular将自动替换＆＃34;正在加载......＆＃34;一旦Angular被加载，由真实内容。但是，这并不适用于我的程序。当变量为false时，我还使用了一个布尔变量来隐藏它。但无济于事。请检查我的代码并做相应的指导。

transaction.component.html

 <table>
 <thead> ....
 </thead>

     <my-app>
      <div class="loaded" [class.loaded]="loaded">
      <div class="text-center">
       <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
       </div>
      </div>
    </my-app>

  <tbody>
        .....
  </tbody>
   <table>

transaction.component.ts

 export class TransactionComponent implements OnInit {
 public loaded=false;


 ngOnInit() {

 this.loaded=true;


  }

 insideSearchByText(filterObj) {

    this.http.post("http://" + url + ":" + port + 
   "/transaction/masterSearchTransactionForm/", this.filterObj
      , { headers: new Headers({ 'Authorization': 'Bearer ' + 
    localStorage.getItem('Token') }) })
   .map(result => this.result = result.json(),

    this.loaded=false)

    .subscribe((res: Response) => {
    ....
    }});
    }

错误

 ERROR Error: Uncaught (in promise): Error: Template parse errors:
 'my-app' is not a known element:
 1. If 'my-app' is an Angular component, then verify that it is part 
 of 
 this module.
 2. If 'my-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
 to 
 the '@NgModule.schemas' of this component to suppress this message. 
 ("


  [ERROR ->]<my-app></my-app>

Answer 1

<div class="loaded" [class.loaded]="loaded" *ngIf="!loaded">
  <div class="text-center">
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <div>Something witty for your userbase</div>
  </div>
</div>

您只能在加载时显示元素，因此ngIf应该足够了。

如果加载的类不包含任何内容，则可能不需要包装器。我不知道那里有什么样的风格。

或者将链接发布到您尝试使用的引导程序组件，如果这对您来说还不够。

在angular2 +

1 个答案: