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

我正在尝试从一个看起来像“/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() {}
}

---

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

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

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

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

@Injectable({
  providedIn: 'root'
})
// https://stackoverflow.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);
  }
}

3） 在breadcrumb组件中，让breadcrumbsList订阅来自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() {}
}

---

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

是的，很好，呼叫凯尔。我修正了问题中的细节，但params仍然是一个空对象。看起来我们可能正在处理激活路由的两个不同实例，请参阅。在那篇文章中有一些潜在的解决方案，但没有一个像你期望的那样干净。

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() {}
}