@Component在angular2 +中给出错误 [英] @Component giving error in angular2+

问题描述

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

I am trying to use a spinner in my application because there is lots of data that takes time to load. But here is the issue. I have taken this link as reference -

Angular2的Pre-Bootstrap加载屏幕

和

在angular2 +中实现微调器

在上面显示的文章中，他们提到使用Angular或(或者也可能)在加载Angular后会自动用实际内容替换"Loading ...".但是，这不适用于我的程序.请检查我的代码并进行相应的指导.

In the article above shown they have mentioned that using or (or probably also) Angular will automatically replace "Loading..." by the real content once Angular is loaded. However , this doesn't apply in my program. Please check my code and guide accordingly.

错误

   Argument of type '{ selector: string; 'my-app': any; templateUrl: 
   string; styleUrls: string[]; }' is not assignable to parameter of 
   type 'Component'.
    Object literal may only specify known properties, and ''my-app'' 
   does not exist in type 'Component'.

transaction.component.html

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

     <my-app>
      <div class="loaded" *ngIf="loaded">
      <div class="text-center">
       <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div> Data Waiting To Be Loaded </div>
       </div>
      </div>
    </my-app>

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

transaction.component.ts

   @Component({
    selector: 'app-transaction','my-app',
    templateUrl: './transaction.component.html',
    styleUrls: 
     ['./transaction.component.scss',]

     }) 


 export class TransactionComponent implements OnInit {
 public loaded=false;


 ngOnInit() {

 this.loaded=true;


  }

 insideSearchByText(filterObj) {

    this.http.post("http://" + url + ":" + port + 
  .....

   .map(result => this.result = result.json(),

    this.loaded=false)


    ....
    }});
    }

transaction.component.scss

  .loaded {
   display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
   }

推荐答案

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html',
  styleUrls: 
    ['./transaction.component.scss',]
})

另一个组件(如果有):

Another component (if you have it):

@Component({
      selector: 'my-app',
      templateUrl: './my-app.component.html',
      styleUrls: 
        ['./my-app.component.scss',]
    })
export class MyAppComponent {
...
}

在模板中使用该选择器:

And in template use that selector:

<my-app>
  <div class="loaded" *ngIf="loaded">
    <div class="text-center">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
      <div> Data Waiting To Be Loaded </div>
    </div>
  </div>
</my-app>

如果没有MyAppComponent，则不能在模板中使用它.为什么在模板中有?

If you don't have the MyAppComponent, then you can't use it in template. Why do you have the in the template?

这篇关于@Component在angular2 +中给出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！