当路由变化的时候刷新组件

比如说要刷新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 路由变化的时候实时监测刷新组件的更多相关文章

  1. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

  2. apachetop 实时监测web服务器运行状况

    apachetop 实时监测web服务器运行状况   我们经常会需要知道服务器的实时监测服务器的运行状况,比如哪些 URL 的访问量最大,服务器每秒的请求数,哪个搜索引擎正在抓取我们网站?面对这些问题 ...

  3. Linux的watch命令 — 实时监测命令的运行结果

    Linux的watch命令 — 实时监测命令的运行结果 watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得 ...

  4. linux下实时监测命令运行结果工具:watch

    watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...

  5. Vue-- 监听路由变化,数据无法更新?

    之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...

  6. AngularJS监听路由变化

    使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...

  7. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  8. linux下实时监测tomcat关闭并启动

    linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...

  9. 用ADB(Android Debug Bridge)实时监测Android程序的运行

      监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...

随机推荐

  1. python 操作redis之——HyperLogLog (八)

    #coding:utf8 import redis # python 操作redis之——HyperLogLog r =redis.Redis(host=") # 1.Pfadd 命令将所有 ...

  2. java同一个实体的复制

    import org.springframework.beans.BeanUtils; //将mon的值复制给monitorCommission;monitorCommission是实体Monitor ...

  3. android:scaleType=&quot;matrix&quot;布局文件载入图片时候的显示方式

    android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来size居中显示,不缩放,当图片长/宽超过View的长/宽 ...

  4. find_if查找vector内对象的成员 作为菜鸟一直不会用也不敢用

    用stl的find方法查找一个包含简单类型的vector中的元素是很简单的,例如 vector<string> strVec; find(strVec.begin(),strVec.end ...

  5. DB2检测表字段改动的方法(不用触发器)

    ALTER TABLE TEST ADD COLUMN RTS TIMESTAMP NOT NULL GENERATED ALWAYS FOR EACH ROW ON UPDATE AS ROW CH ...

  6. mac 写NTFS磁盘

    最简单的方法就是把 OS X 自带的 mount_ntfs 默认加载方式从只读改成读写, 具体方法如下 # 用 root 身份做如下操作 (高危! 请切记自己在干什么)sudo -s cd /sbin ...

  7. Ubuntu14.04.3 64位环境下openjdk7编译

    系统环境:Ubuntu14.04.3 -amd64 in VMWare1.安装openjdk7依赖 sudo apt- sudo apt--jdk sudo apt-get install build ...

  8. 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 ...

  9. jstl format date

    使用fmt函数需在jsp中引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" ...

  10. sqlservler 分页的实现

    转载自:http://www.cnblogs.com/FreeDong/archive/2011/09/27/2193240.html 当我们显示列表信息的时候,我们常常以分页形式显示,当然在ASP. ...