通过app.component组件和服务传参可以实现在多页面显示进度圈和错误提示效果
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服务的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;
}
// 滑动
getMoveY(e) {
let touch = e.touches[0] || e.changedTouches[0];
this.endY = touch.pageY;
}
// 下拉页面重新加载
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;
}
水平有限，互相学习，如有不足，感谢指正
