angular 4 路由变化的时候实时监测刷新组件
当路由变化的时候刷新组件
比如说要刷新header组件
在header.ts里
import {Router, NavigationEnd} from "@angular/router";
import {getUserInfo, setUserInfo} from "../../../../storage/user-info"; @Component({
selector: 'app-header1',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit { constructor(private router: Router) {
router.events
.filter((event) => event instanceof NavigationEnd)
.subscribe((event: NavigationEnd) => {
// 当路由发生变化,存储在浏览器里面的的用户信息发生变化的时候刷新组件
this.userinfo = getUserInfo();
console.log(this.userinfo);
});
}
}
比如说当用户修改了姓名信息之后,就会局部刷新header组件里显示的姓名信息
这个只用于路由发生变化的实时刷新,如果路由没有变是不能进行实时刷新的
angular 4 路由变化的时候实时监测刷新组件的更多相关文章
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- apachetop 实时监测web服务器运行状况
apachetop 实时监测web服务器运行状况 我们经常会需要知道服务器的实时监测服务器的运行状况,比如哪些 URL 的访问量最大,服务器每秒的请求数,哪个搜索引擎正在抓取我们网站?面对这些问题 ...
- Linux的watch命令 — 实时监测命令的运行结果
Linux的watch命令 — 实时监测命令的运行结果 watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得 ...
- linux下实时监测命令运行结果工具:watch
watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...
- Vue-- 监听路由变化,数据无法更新?
之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...
- AngularJS监听路由变化
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- linux下实时监测tomcat关闭并启动
linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...
- 用ADB(Android Debug Bridge)实时监测Android程序的运行
监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...
随机推荐
- python 操作redis之——HyperLogLog (八)
#coding:utf8 import redis # python 操作redis之——HyperLogLog r =redis.Redis(host=") # 1.Pfadd 命令将所有 ...
- java同一个实体的复制
import org.springframework.beans.BeanUtils; //将mon的值复制给monitorCommission;monitorCommission是实体Monitor ...
- android:scaleType="matrix"布局文件载入图片时候的显示方式
android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来size居中显示,不缩放,当图片长/宽超过View的长/宽 ...
- find_if查找vector内对象的成员 作为菜鸟一直不会用也不敢用
用stl的find方法查找一个包含简单类型的vector中的元素是很简单的,例如 vector<string> strVec; find(strVec.begin(),strVec.end ...
- DB2检测表字段改动的方法(不用触发器)
ALTER TABLE TEST ADD COLUMN RTS TIMESTAMP NOT NULL GENERATED ALWAYS FOR EACH ROW ON UPDATE AS ROW CH ...
- mac 写NTFS磁盘
最简单的方法就是把 OS X 自带的 mount_ntfs 默认加载方式从只读改成读写, 具体方法如下 # 用 root 身份做如下操作 (高危! 请切记自己在干什么)sudo -s cd /sbin ...
- Ubuntu14.04.3 64位环境下openjdk7编译
系统环境:Ubuntu14.04.3 -amd64 in VMWare1.安装openjdk7依赖 sudo apt- sudo apt--jdk sudo apt-get install build ...
- linux 编译kernel与svn版本冲突解决方法 [drivers/gpu/mali/mali/common/mali_kernel_core.o] 错误 1
问题: 系统正常编译linux系统kernel,安装svn后,kernel编译出错. 错误: CHK include/linux/version.h CHK include/gene ...
- jstl format date
使用fmt函数需在jsp中引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" ...
- sqlservler 分页的实现
转载自:http://www.cnblogs.com/FreeDong/archive/2011/09/27/2193240.html 当我们显示列表信息的时候,我们常常以分页形式显示,当然在ASP. ...