在我的angular2应用中加载like this时,有没有办法显示正在运行的进度条? 代码如下。它显示了我在其中使用加载条所需的特定组件。
这里是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>
&#13;
答案 0 :(得分:1)
如果你看到基本的例子
让我们考虑您的根组件app-root
index.html中有这样的东西
现在你在它之间写的任何东西都将充当装载机。 所以,
这是加载
然后是文本&#34;这是加载&#34;将充当装载机。
您可以在那里编写任何代码,以获得加载体验。