通過(guò)app.component組件和服務(wù)傳參可以實(shí)現(xiàn)在多頁(yè)面顯示進(jìn)度圈和錯(cuò)誤提示效果
1.html文件
<div?class="page"?(touchstart)="getStartY($event)"?(touchend)="getEndY()"?(touchmove)="getMoveY($event)">
??<router-outlet></router-outlet>
??<!--?提示層?-->
??<div?[ngSwitch]?=?"status">
????<div?class="spinnerBox"?*ngSwitchCase?=?"'loading'">
??????<mat-spinner?diameter="40"?mode="indeterminate"></mat-spinner>
??????<span>加載中...</span>
????</div>
????<div?class="spinnerBox"?*ngSwitchCase?=?"'ok'">
??????<mat-icon?svgIcon="checkbox-marked-circle"?[style.fill]="'#1EE3CF'"></mat-icon>
??????<span>{{statusText}}</span>
????</div>
????<div?*ngSwitchDefault=""></div>
??</div>
??<!--?遮罩層?-->
??<div?class="mask"?*ngIf="status"></div>
</div>
2.ts文件
import?{?Component,?AfterContentChecked?}?from?'@angular/core';
import?{?AppCommon?}?from?'src/app/@common/services/app-common';
@Component({
??selector:?'app-root',
??templateUrl:?'./app.component.html',
??styleUrls:?['./app.component.scss']
})
export?class?AppComponent?implements?AfterContentChecked?{
??status?=?'';
??statusText?=?'';
??startY:?any;
??endY:?any;
??startTime:?number;
??constructor(
????private?appCommonSer:?AppCommon,
??)?{
??}
//子組件修改的AppCommon服務(wù)的spinnerStatus、statusText成員變量需要在
//?ngAfterContentChecked周期中賦值給app.component組件的成員變量才能生效
??ngAfterContentChecked():?void?{
???this.status?=?this.appCommonSer.spinnerStatus;
???this.statusText?=?this.appCommonSer.statusText;
??}
??getStartY(e)?{
????this.startTime?=?Date.now();
????let?touch?=?e.touches[0]?||?e.changedTouches[0];
????this.startY?=?touch.pageY;
??}
??//?滑動(dòng)
??getMoveY(e)?{
????let?touch?=?e.touches[0]?||?e.changedTouches[0];
????this.endY?=?touch.pageY;
??}
??// 下拉頁(yè)面重新加載
??getEndY()?{
????const?dTime?=?Date.now()?-?this.startTime;
????if?(this.endY?-?this.startY?>?50?&&?dTime?>??1000)?{
??????location.reload();
????}
??}
}
3.css文件
div.page?{
??width:100%;
??height:100%;
}
??div.spinnerBox?{
????position:?fixed;
????z-index:?5;
????height:?60px;
????width:?60px;
????margin:?auto;
????top:?0;
????left:?0;
????bottom:?0;
????right:?0;
??}
????mat-spinner?{
??????margin:?0?auto;
????}
????mat-icon?{
??????width:?36px;
??????height:?36px;
??????display:?block;
??????margin:?0?auto;
????}
????span?{
??????font-weight:?bold;
??????font-size:?14px;
??????color:?#333;
????}
??div.mask?{
????position:?absolute;
????left:?0;
????top:?0;
????z-index:?4;
????width:?100%;
????height:?100%;
????background-color:?#ECF0F1;
????opacity:?0.5;
??}
水平有限，互相學(xué)習(xí)，如有不足，感謝指正
