[Angular] How to show global loading spinner for application between page navigation
app.component.ts:
import { Component, OnInit } from "@angular/core";
import { select, Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import {
NavigationCancel,
NavigationEnd,
NavigationError,
NavigationStart,
Router
} from "@angular/router";
import { AppState } from "./reducers/index";
import { isLoggedIn, isLoggedOut } from "./auth/auth.selectors";
import { AuthActions } from "./auth/action-types"; @Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
loading = true; constructor(private store: Store<AppState>, private router: Router) {} ngOnInit() {
...this.router.events.subscribe(event => {
switch (true) {
case event instanceof NavigationStart: {
this.loading = true;
break;
} case event instanceof NavigationEnd:
case event instanceof NavigationCancel:
case event instanceof NavigationError: {
this.loading = false;
break;
}
default: {
break;
}
}
});
} }
<div class="spinner-container" *ngIf="loading">
<mat-spinner></mat-spinner>
</div>
[Angular] How to show global loading spinner for application between page navigation的更多相关文章
- 加载旋转框(loading spinner)
目标是这样的 用到的组件 AlertDialog 和 ProgressBar 先创建一个 AlertDialog 的布局 <?xml version="1.0" encodi ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 升级 AngularJS 至 Angular
Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...
- Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件
1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolb ...
- Angular概念纵览
Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...
- (七)理解angular中的module和injector,即依赖注入
(七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54 阅读:63060 评论:1 收藏:0 [点 ...
- Angular JS中的依赖注入
依赖注入DI angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide. DI 容器3要素:服务的注册.依赖关系的 ...
- 随机Loading
using UnityEngine; using System.Collections; public class Loading : MonoBehaviour { public bool m_Is ...
随机推荐
- spring整合quartz报错
今天spring整合quartz报错,最后一步步排查,发现是和redis依赖冲突,最后redis升级了一下,问题解决. 总结:发现问题,逐一排查,如果是整合问题,报类加载不到的错误,大概率是和其他组件 ...
- java当中JDBC当中JNDI用来查找dataSource的例子
[学习笔记] 8.JNDI用来查找dataSource的例子: import javax.naming.InitialContext;import javax.naming.Context; impo ...
- LeetCode第152场周赛(Java)
这算是我第一次正式参加 LeetCode 的周赛吧.通过两道题.意料之中(通过上次模拟可以看出来).总的来说,脑袋还是不太灵光.想的有点慢.全球第一名 0:10:19 就全部通过...感觉我的智商被狠 ...
- 宽度学习(Broad Learning System)
宽度学习(Broad Learning System) 2018-09-27 19:58:01 颹蕭蕭 阅读数 10498 收藏 文章标签: 宽度学习BLBLS机器学习陈俊龙 更多 分类专栏: 机器 ...
- redis订阅与发布系统
一.概述 1.redis通过publish.subscribe等命令实现了订阅与发布模式. 2.这个功能提供两种信息机制,分别是订阅/发布到频道和订阅/发布到模式. 二.频道的订阅与信息发送 1.re ...
- Java8一Lambda与函数式接口
关于Lambda表示在工作学习中会经常用到,但并没有全面的去了解.在这里做一个较为详细的记录供以后学习查阅.主要参考Java 8 Lambda 表达式 引言 Java8之前,我们在使用Runnale创 ...
- mysql数据库备份之主从同步配置
主从同步意义? 主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave).因为复制是异步进行的,所以从服务 ...
- Office 365 的安装与激活
(1)Office 365的安装,本处使用的是Office Tool Plus. (2)等待安装完成 (3)重头戏激活 , 使用命令行方式 (不推荐) 以下内容,新建文本文件,然后保存为.bat,再以 ...
- Steam之两个list间交集、并集、差集
public static void main(String[] args) { List<String> list1 = new ArrayList(); list1.add(" ...
- Flask中jinja2的应用
Flask中jinja2的应用 # -*- coding: utf-8 -*- # @Time : 2019/9/24 17:29 # @Author : AnWen from flask impor ...