Angular 6如何在组件中获取路由配置的data属性值

你读取不到路由配置中data值的核心原因有两个：

• 你将data配置在了懒加载路由节点上，直接注入ActivatedRoute读取snapshot.data只能拿到当前组件挂载的单一路由节点数据，不会自动合并多层父路由、懒加载模块根路由的配置
• 你之前调用的queryParams是用来读取URL中?拼接的查询参数的，和路由静态配置的data属性完全无关，自然拿不到timeout字段

根据你要实现全局管控空闲超时的需求，优先用全局路由监听的方案，后续新增路由只需要加data配置即可，不需要修改核心逻辑。

方案1：全局监听路由（推荐） #

直接在根组件AppComponent中监听路由导航完成事件，遍历路由树拿到当前激活路由的完整合并data配置，统一处理空闲超时逻辑，代码如下：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
// 按你项目实际路径引入idle、keepalive服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private idle: Idle,
    private keepalive: Keepalive
  ) {}

  ngOnInit() {
    this.router.events.pipe(
      // 只在路由导航完成时触发逻辑
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => {
        // 遍历到当前路由树的最底层激活节点
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      // 合并获取路由的data配置
      mergeMap(route => route.data)
    ).subscribe(data => {
      // 直接实现你需要的超时控制逻辑
      if (data.timeout === false) {
        this.idle.stop();
        this.keepalive.stop();
      } else {
        this.idle.watch();
        this.keepalive.start();
      }
    });
  }
}

你现有的路由配置不需要修改，reports路由上配置的data: { timeout: false }可以被上述代码正常读取。后续给其他路由加超时控制配置时，直接在对应路由规则上加data字段即可，不需要改动全局逻辑。

方案2：单个组件内读取当前路由data #

如果需要在某个具体路由对应的组件内读取当前路由的data，不要直接读snapshot.data（多层路由、懒加载场景下数据不完整），直接订阅data数据流即可：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html'
})
export class SampleComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.data.subscribe(data => {
      // 这里拿到的就是当前路由的完整data配置
      console.log(data.timeout);
    });
  }
}

• 不要混淆三类路由传参：params用来读取路径参数（如/reports/:id中的id），queryParams用来读取URL问号拼接的参数，data是路由静态配置的固定值，三者读取方式完全不同
• 懒加载路由的data不会自动向上冒泡到父路由，全局监听时必须遍历到最底层的firstChild节点，才能拿到完整配置
• 上述代码用到的RxJS操作符是Angular 6.x版本自带的，不需要额外安装第三方依赖

内容的提问来源于stack exchange，提问作者Jim Grant