javascript - 如何在 Angular 2中加载路线时显示运行进度条？

Question

有什么方法可以在我的页面加载时显示运行进度条like this ，在我的 angular2 应用程序中？代码如下。它显示了我需要使用其中的加载栏的特定组件。

这里是component.ts和service.ts

component.ts

news: AllSpecialNews[]= [];

ngOnInit(): void {
      this.getServerData(1);
  }
  
  
getServerData(event) {
    this._newsServicse.getPageDataSpcial(event).subscribe(
      response => {
          this.news = response.data;
          this.totalItems = response.total;
      },
      error => {
        alert('خطأ بالاتصال ');
      }
    );
      return event;
  }
  
  
    
service.ts

getPageDataSpcial(id: number) {
        return this._http.get(`${this.pageSpical}${id}`)
            .map((res: Response) => res.json());
    }

here is the html page

<div class="home" *ngIf="news" >
        <div class="container">
            <div class="row ">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-news">
                            <div class="tittle pull-right">
                                <h2>أخبار مميزة</h2>
                            </div> 
                        </div>
                    </div>
                    <div class="view-news">
                        <div  class="row">
                            <a [routerLink]= "['/news', news[0]?.id+'-'+ news[0]?.seo_name]">
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                    <img width="100%" [style.height.px]="265" src="https://api.watania.net/290x270/{{news[0]?.image}}" alt="{{news[0]?.title}}">
                                </div>
                                </a>
                            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
                                <h1 class="title-one fon" innerHTML="{{news[0]?.title}}"></h1>
                                <p class="time">{{news[0]?.date_to_publish}}</p>
                                <p class="desc lead"  innerHTML="{{news[0]?.summary}}">
                                    
                                </p>
                            </div>
                        </div>
                    </div>
                   
                    <section class="results">
                        <div class="row" >
                            <div *ngFor="let item of news | paginate: {itemsPerPage: 18, currentPage: page, id: '1',totalItems: totalItems} ; let i = index"> 
                                <div *ngIf="i != 0"   class="col-lg-4 col-md-4 col-sm-6 col-x-6">                       
                                    <div class="view-item" >
                                        <span>
                                            <a class="outer-a" [routerLink]= "['/news', item?.id+'-'+item?.seo_name]"  title="{{item?.title}}" routerLinkActive="active">
                                                <img style="height:400px"  src="https://api.watania.net/230x190/{{item?.image}}"  alt="{{item?.title}}"></a>                                               
                                            <a class="inner-a down" title="{{item?.title}}" [routerLink]= "['/newsCategory' , item?.category]" routerLinkActive= "active">{{item?.category}}</a>

                                        </span>

                                        <a  class="title_news_featured" [routerLink]= "['/news' , item?.id+'-'+item?.seo_name]" title="{{item?.title}}" routerLinkActive="active">
                                            <h2 class="lead desc"> <span *ngIf="item.type" class="s">{{item?.type}}: </span> {{item?.title}}</h2>
                                            <p>{{item?.date_to_publish}}</p>
                                        </a>
                                    </div>    
                                </div>  
                            </div>        
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <pagination-controls (pageChange)="page = getServerData($event)" id="1" class="paginate pagination pull-left" maxSize="5"
                                    directionLinks="true" previousLabel=""
                                    nextLabel="" autoHide="true">
                                </pagination-controls> 
                            </div>
                        </div> 
                    </section>
                </div>
                <wn-leftside></wn-leftside>
            </div>
        </div>
    </div>

Answer 1

如果您看到基本示例

让我们考虑一下您的根组件 app-root

在index.html中有这样的东西

现在您在其中编写的任何内容都将充当加载程序。所以，

正在加载

然后文本“this is loading”将充当加载程序。

您可以在那里编写任何代码，以获得加载体验。