@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 -

Pre-Bootstrap Loading Screen For Angular2

and

to implement a spinner in angular2+

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.

Error

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

回答1:

@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>

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

回答2:

I think your problem is a syntax error. You have defined two selectors for this component. I think this line in your transaction.component.ts

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

should only be

selector: 'app-transaction',

since the selector doesn't take arrays as value (like e.g. styleUrls does).