解决 Angular 组件中无法获取路由参数的问题

在 Angular 应用中，我们经常需要从路由中获取参数来进行相应的操作。但有时候我们会发现，在某些组件中无法获取路由参数，这时候该怎么办呢？本文将介绍如何解决 Angular 组件中无法获取路由参数的问题，让你的应用更加完善。

问题分析

首先，我们需要了解为什么有些组件无法获取路由参数。这是因为在 Angular 中，路由参数是由 ActivatedRoute 服务提供的，而这个服务只能在路由组件中使用。如果在非路由组件中使用 ActivatedRoute，就会出现无法获取路由参数的情况。

解决方法

有了问题的分析，我们就可以开始解决这个问题了。解决方法有两种：一种是通过将路由参数传递给子组件，另一种是通过 Router 服务来获取路由参数。

通过将路由参数传递给子组件

如果你的组件是一个子组件，那么你可以通过将路由参数传递给子组件来解决这个问题。具体做法是在父组件中获取路由参数，然后将参数传递给子组件：

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [param]="param"></app-child>
  `,
})
export class ParentComponent {
  param: string;

  constructor(private route: ActivatedRoute) {
    this.route.paramMap.subscribe((params) => {
      this.param = params.get('param');
    });
  }
}

在这个例子中，我们通过 ActivatedRoute 服务获取路由参数，并将参数传递给了 app-child 组件。在子组件中，我们可以通过 @Input 装饰器来接收父组件传递过来的参数：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Param: {{ param }}</p>
  `,
})
export class ChildComponent {
  @Input() param: string;
}

通过 Router 服务获取路由参数

如果你的组件不是一个子组件，那么你可以通过 Router 服务来获取路由参数。具体做法是在组件中注入 Router 服务，然后通过 Router 服务的 url 属性获取当前路由的 URL，并从 URL 中解析出路由参数：

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

@Component({
  selector: 'app-my-component',
  template: `
    <h1>My Component</h1>
    <p>Param: {{ param }}</p>
  `,
})
export class MyComponent {
  param: string;

  constructor(private router: Router) {
    const url = this.router.url;
    const parts = url.split('/');
    this.param = parts[parts.length - 1];
  }
}

在这个例子中，我们通过 Router 服务的 url 属性获取当前路由的 URL，并从 URL 中解析出路由参数。注意，这种方法只适用于路由参数是 URL 的一部分的情况。

总结

无法获取路由参数是一个比较常见的问题，但也是比较容易解决的。通过本文介绍的两种方法，你可以轻松地解决 Angular 组件中无法获取路由参数的问题。希望本文能够对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65891cbaeb4cecbf2de50d62