如何获取路由器未加载的组件中路由更改的当前路由参数

Posted 2023-03-13

【中文标题】如何获取路由器未加载的组件中路由更改的当前路由参数

【英文标题】：How to get the current route params on route changes in a component not loaded by the router

【发布时间】：2020-03-02 01:43:06

【问题描述】：

我正在尝试从类似于“/categories/:cat1/:cat2/browse”的路线中获取参数

在路由加载的组件中获取它似乎可以正常工作，但是已经在应用程序中加载的另一个组件不会被路由更改更改

import  Component, OnInit  from '@angular/core';
import  Router, ActivatedRoute, Params, RoutesRecognized  from '@angular/router';

@Component(
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss'],
)
export class BreadcrumbsComponent implements OnInit 
  constructor(private activatedRoute: ActivatedRoute, router: Router) 
    router.events.subscribe(e => 
      activatedRoute.params.subscribe(params => 
        console.log( params );
      );
    );
  
  ngOnInit() 

【参考方案1】：

您不想订阅路由参数而不是查询参数吗？ （即activatedRoute.params.subscribe 而不是activatedRoute.queryParams.subscribe）

【讨论】：

是的，凯尔打得很好。我在问题中修复了该细节，但 params 最终仍然是一个空对象。

看起来我们可能正在处理激活路由的两个不同实例，请参阅link。该帖子中有一些潜在的解决方案，但没有一个像您期望的那样干净。

【参考方案2】：

我最终解决这个问题的方法是：

1) 创建一个使用 BehaviorSubject 接收参数更新的面包屑服务

import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs';
import  BreadcrumbsList  from './breadcrumbsList';
import  ParseErrorLevel  from '@angular/compiler';

@Injectable(
  providedIn: 'root'
)
// https://***.com/questions/46047854/how-to-update-a-component-without-refreshing-full-page-angular
export class BreadcrumbsService 
  public breadcrumbsList: BehaviorSubject<BreadcrumbsList> = new BehaviorSubject(
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: []
  );

  constructor() 

  // https://developers.google.com/search/docs/data-types/breadcrumb#example
  updateParamMap(paramMap, root, suffix = null, endpoint = null) 
    const breadcrumbsList = 
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: []
    ;
    let position = 0;
    let curPath = '';
    console.log( test: paramMap.get('level1') );
    for (var i = 0; i < 6; i++) 
      let level = paramMap.get('level' + i);
      if (i === 0) 
        level = root;
      
      if (!level) 
        continue;
      
      curPath += '/' + level;
      let item = 
        '@type': 'ListItem',
        position: i + 1,
        name: level,
        item: suffix ? curPath + '/' + suffix : curPath
      ;
      breadcrumbsList.itemListElement.push(item);
    
    if (endpoint) 
      let item = 
        '@type': 'ListItem',
        position: i + 2,
        name: endpoint
      ;
      breadcrumbsList.itemListElement.push(item);
    
    // update the breadcrumbs list for anything that is listening for updates
    this.breadcrumbsList.next(breadcrumbsList);
  

2) 在每个由应该更新面包屑的路由加载的组件中，导入 BreadcrumbService，并将此行添加到 ngOnInit()

this.breadcrumbsService.updateParamMap(this.route.snapshot.paramMap, 'assets', 'browse');

3) 在面包屑组件中，让面包屑列表订阅来自 BreadcrumbsService 的更新

import  Component, OnInit, Input  from '@angular/core';
import  BreadcrumbsList  from './breadcrumbsList';

@Component(
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss']
)
export class BreadcrumbsComponent implements OnInit 
  @Input() path: String[];
  breadcrumbsList: BreadcrumbsList;

  constructor(breadcrumbsService: BreadcrumbsService) 
    breadcrumbsService.breadcrumbsList.subscribe(value => 
      this.breadcrumbsList = value;
    );
  

  ngOnInit() 

并且面包屑模板可以处理面包屑列表