Angular中从祖父组件获取完整URL返回空值问题求助

我来帮你分析下为什么你在AppComponent里拿不到完整URL，以及对应的解决办法：

问题原因 #

你的AppComponent是Angular应用的根组件，它对应的是根路由（一般是空路径''）。而你看到的index/notes/note1/Support是根路由下的子路由路径，根组件的ActivatedRoute只会关联自身的路由信息，自然拿不到子路由的内容，所以this.route.snapshot.url返回空值。

几种可行的解决方案 #

方案1：直接用Router的url属性（最简单）

这是最快捷的方式，直接通过Router实例获取当前激活的完整路由路径：

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

export class AppComponent implements OnInit{ 
  myURL: string; 
  constructor(private router: Router){ } 

  ngOnInit(){ 
    // 获取不带域名的路由路径，比如 "/index/notes/note1/Support"
    this.myURL = this.router.url; 
    // 如果需要包含域名、端口的完整URL，直接用浏览器API就行
    // this.myURL = window.location.href;
  } 
}

方案2：监听路由事件，获取完整路由树

如果需要更细致的路由信息（比如每个路由段的参数），可以监听路由的NavigationEnd事件，等路由稳定后遍历路由树：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent implements OnInit{ 
  myURL: string; 
  constructor(private router: Router, private route: ActivatedRoute){ } 

  ngOnInit(){ 
    this.router.events.pipe(
      // 只监听路由导航完成的事件
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let currentRoute = this.route.root;
      let fullPath = '';
      // 遍历所有子路由，拼接完整路径
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
        fullPath += '/' + currentRoute.snapshot.url.map(segment => segment.path).join('/');
      }
      this.myURL = fullPath;
    });
  } 
}

方案3：递归遍历ActivatedRoute的子路由

如果一定要基于ActivatedRoute来实现，可以写个递归函数遍历所有子路由节点：

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

export class AppComponent implements OnInit{ 
  myURL: string; 
  constructor(private route: ActivatedRoute){ } 

  ngOnInit(){ 
    this.myURL = this.getFullRoutePath(this.route.root);
  }

  // 递归获取完整路由路径的私有方法
  private getFullRoutePath(route: ActivatedRoute): string {
    let path = '';
    // 拼接当前路由段的路径
    if (route.snapshot.url.length > 0) {
      path += '/' + route.snapshot.url.map(segment => segment.path).join('/');
    }
    // 递归处理子路由
    if (route.firstChild) {
      path += this.getFullRoutePath(route.firstChild);
    }
    return path;
  }
}

总结 #

如果只是需要拿到完整的路由路径，方案1是最省心的；如果要处理每个路由段的细节，再考虑方案2或3。

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