@Component 在 angular2+ 中给出错误

Question

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

Pre-Bootstrap Loading Screen For Angular2

和

to implement a spinner in angular2+

在上面显示的文章中，他们提到使用或（或可能同时）Angular 将在加载 Angular 后自动将“正在加载...”替换为真实内容。但是，这不适用于我的程序。 请检查我的代码并进行相应的指导。

错误

   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%;
   }

Answer 1

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

另一个组件（如果你有的话）：

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

在模板中使用该选择器：

<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，则不能在模板中使用它。为什么模板中有 ？

Answer 2

我认为您的问题是语法错误。您已经为此组件定义了两个选择器。我认为您的 transaction.component.ts

中的这一行

selector: 'app-transaction','my-app',

应该只是

selector: 'app-transaction',

因为选择器不将数组作为值（例如 styleUrls 那样）。