Angular：将数据传递给通过路由加载的组件 - Javascript

在Angular中，我们经常需要将数据从一个组件传递到另一个组件。这个过程可以通过路由来实现。在这篇文章中，我们将谈论如何在Angular应用程序中通过路由向组件传递数据。

通过路由传递数据

Angular提供了一个名为路由参数的特性，可以通过它向通过路由加载的组件传递数据。路由参数是URL中的一部分，可以用于标识不同的资源，例如用户ID、产品ID等。

在路由配置中添加参数

要在路由中传递参数，我们需要在路由配置中定义参数。在如下的路由配置中，我们定义了一个名为id的路由参数：

const routes: Routes = [
  { path: 'users/:id', component: UserComponent }
];

在组件中接收参数

接下来，我们需要在组件中接收路由参数。对于通过路由加载的组件，我们可以使用Angular提供的ActivatedRoute服务来获取路由参数。我们可以在组件的构造函数中注入ActivatedRoute，并使用snapshot属性来获取路由参数：

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

// ...

export class UserComponent {
  public id: number;

  constructor(private route: ActivatedRoute) {
    this.id = this.route.snapshot.params['id'];
  }
}

在URL中传递参数

要在URL中传递参数，我们可以使用Angular提供的RouterLink指令。在下面的示例中，我们将userId作为参数传递给了user路由：

<a [routerLink]="['/user', userId]">User</a>

在组件中获取参数并发送请求

最后，我们可以在组件中使用路由参数来获取或者发送请求。在以下示例中，我们使用路由参数来获取特定用户的详细信息：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  public user: any;
  public id: number;

  constructor(private route: ActivatedRoute, private userService: UserService) {
    this.id = this.route.snapshot.params['id'];
  }

  ngOnInit() {
    this.userService.getUser(this.id)
      .subscribe(user => {
        this.user = user;
      });
  }
}

在上面的代码中，我们在组件的构造函数中注入了一个名为UserService的服务。getUser方法是UserService服务中的一个方法，该方法负责从服务器获取特定ID的用户的详细信息。

结论

使用路由参数向通过路由加载的组件传递数据是非常有用的。本文中，我们介绍了如何在Angular应用程序中使用路由参数，并提供了一个完整的示例来说明如何在组件中获取或者发送请求。如果您刚刚接触Angular，希望本文对您有所帮助。