首页 ›  文章

Angular8 路由事件使用

2019-12-04

利用Angular提供得路由系统可以比较方便地构建项目得框架结构,同时还内置了路由对象事件,可以帮助解决开发中较为常见的问题。

路由事件监听

在app组件中注入Router类,订阅路由的event事件:

constructor(
    private http: HttpClient,
    private router: Router,
    private activatedRoute: ActivatedRoute,
){}
  ngOnInit(): void {
    this.router.events.pipe(
      tap(o => console.log(o))
    ).subscribe(route => {
      console.log(route);
    });
  }

路由状态 有路由导航开始,导航结束;路由配置加载开始,配置加载结束;路由识别,子路由激活开始,激活结束;路由激活开始与结束等。这些路由事件均有各自最佳的场景,但是前后顺序基本是不变的,导航开始是第一个,当其余事件结束,最后导航结束,我们可以根据这个状态去设置业务需求,先查看一般的路由事件中,event包含的内容。

NavigationStart(导航开始) image.png ActivationEnd(路由激活成功)

image.png

NavigationStart(导航结束) image.png

id 即为 navigationId ,被用于保存历史记录,以供浏览器导航回来。只有当这次导航是被 popstate 事件触发时,它才不为空。路由器会把一个 navigationId 赋予每一次路由器过渡/导航。即使用户点击了浏览器的后退按钮,也会创建一个新的 navigationId。 所以,从路由器的视角来看,路由器永远不会 "后退"。借助 restoredState 及其 navigationId,你可以区分开创建新状态和 popstate 事件的行为。 在 popstate 时,你可以恢复一些以前记录的状态(如滚动到的位置)。 navigationTrigger 为导航过程中的触发器,映射关系为: router.navigateByUrl / router.navigate => imperative popstate => popstate hashchange => hashchange data 为路由设置中提供的路由信息,例如标题等; 其它诸如参数等信息也可以通过这个对象获取。


网站标题设置

准确地获取标题,调用内置的Title.setTitle 设置网站标题。我们只需要在路由激活下获取data即可。

this.router.events.pipe(
      // tap(o => console.log(o))
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => {
        return route.data;
      }),
    ).subscribe(route => {
      console.log(route);
});

简单解释下上述代码: filter 选择 NavigationEnd 的原因是找激活路由的快照,只有在导航结束事件只有一次,如果选择 ActivationEnd 也可以,但是此事件触发多次; 获取到当前路由,在当前路由的第一个子路油出现的时候返回子路由; mergeMap 将原本的Observable打平为数据返回给订阅者接收,结果为:

{
    title:'新闻中心'
}

路由参数处理

添加参数: 1.HTML中添加:<a [routerLink]="['/contact']" routerLinkActive="router-link-active" [queryParams]="{id:222}">联系我们</a> 2.

this.router.navigate(['/contact'], {
  queryParams: {
    id: 123456
  }
});
或者
this.router.navigateByUrl('/contact?id=484584');

获取参数:

constructor(
    private modal: NzModalService,
    private activedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.activedRoute.queryParams.subscribe(params => {
      console.log(params);// { id: 123 }
    });
  }
原文链接:segmentfault.com

上一篇:nfw-core
下一篇:fullarray-search
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入