angular2 获取参数

The Angular router is a very powerful tool that allows us to do all the routing things needed. The router allows us to:

Angular路由器是一个非常强大的工具，它使我们能够完成所需的所有路由工作。 路由器使我们能够：

• Much more
  多得多

One of the most common tasks when using the router is to create routes with parameters. For instance, here on Scotch, we have user profile links: . The chris part of that is a dynamic route parameter.

使用路由器时，最常见的任务之一是使用参数创建路由。 例如，在Scotch上，我们具有用户个人资料链接： : 。 chris部分是动态路由参数。

两种获取路径参数的方法 (The Two Ways to Grab Route Parameters)

The router provides a couple different ways to grab route parameters. We'll explore both of these and talk about the benefits and cons of each:

路由器提供了几种不同的方法来获取路由参数。 我们将探讨这两种方法，并讨论每种方法的优点和缺点：

• The Snapshot Way: The router provides us with a snapshot of the current route
  快照方式 ：路由器为我们提供了当前路由的快照
• The Observable/Stream Way: Since Angular employs Observables heavily, the router also returns an Observable that we can listen to.
  Observable / Stream方式 ：由于Angular大量使用Observable，因此路由器还返回了我们可以监听的Observable。

We'll talk more on both of these options soon.

我们将很快讨论这两个选项。

( )

Let's get the simple stuff out of the way. We'll create a route that has a route parameter.

让我们把简单的东西弄清楚。 我们将创建一个具有route参数的路由。

// app-routing.module.tsconst routes: Routes = [  {
        path: '',    component: HomeComponent  },  {
        path: 'users/:username',    component: UserComponent  }];

Note: This is a piece of code out of the AppRoutingModule that the creates by default when you run ng new my-app --routing.

注意 ：这是AppRoutingModule的一部分代码，当您运行ng new my-app --routing时， 默认会创建该代码。

The way that we create a route parameter is with the colon syntax. Here we have a route with :username as the route parameter.

我们创建路由参数的方式是使用冒号语法。 在这里，我们有一条以:username作为路由参数的路由。

( )

We'll need to create routes to both of these sections. Here's the various ways we can link to the home page. The Angular router provides us with the directive. All of the following achieve the same effect.

我们将需要创建到这两个部分的路线。 这是我们可以链接到主页的各种方法。 Angular路由器向我们提供了指令。 以下所有效果均相同。

    Home
    Home
    Home

Since this route doesn't have any parameters, you can go ahead and use the first option. You can use the second option if you like having the bracket property binding so it's easy to read as an Angular directive. The third option will be useful when we have route parameters.

由于此路线没有任何参数，因此您可以继续使用第一个选项 。 如果您喜欢具有方括号属性绑定，则可以使用第二个选项 ，这样很容易作为Angular指令读取。 当我们具有路由参数时，第三个选项将很有用。

使用路由参数链接到配置文件页面 (Linking to the Profile Page with Route Parameters)

Here's the ways we can link to the user profiles. In this scenario, we have a variable called username in the corresponding component class.

这是我们可以链接到用户个人资料的方法。 在这种情况下，我们在相应的组件类中有一个名为username的变量 。

{
    { username }} Profile

Now that we have our links, we can go look at how we could grab these route parameters in a UserComponent.

现在我们有了链接，我们可以看看如何在UserComponent获取这些路由参数。

( )

Let's see how we can use the snapshot way to grab route parameters. The Angular Router provides an that we can inject into our classes. This will be the main tool we'll use to grab route parameters.

让我们看看如何使用快照方法来获取路由参数。 Angular Router提供了一个 ，我们可以将其注入到我们的类中。 这将是我们用来获取路线参数的主要工具。

Let's see the basic setup for the UserComponent.

让我们看看UserComponent的基本设置。

// user.component.tsimport {
     Component, OnInit } from '@angular/core';import {
     ActivatedRoute } from '@angular/router';@Component({
      selector: 'app-user',  template: `
This is {
     { username }}'s profile!
`})export class UserComponent implements OnInit {
      username: string;  // inject the activatated route  constructor(private route: ActivatedRoute) {
    }  ngOnInit() {
        // this is where we'll grab data  }}

We'll inject the ActivatedRoute into this component via the constructor. Next we'll use the ActivatedRoute to grab the username route parameter in ngOnInit()

我们将通过构造函数将ActivatedRoute注入此组件。 接下来，我们将使用ActivatedRoute来获取ngOnInit()的username路由参数

ngOnInit() {
      // this is where we'll grab data  // grab using the snapshot method  this.username = this.route.snapshot.params.username;}

This will be enough to grab the username! Let's look at the next way we can grab route parameters and why we would want to use the second method instead of the snapshot method.

这足以获取用户名！ 让我们看一下获取路由参数的下一种方法，以及为什么要使用第二种方法而不是快照方法。

( )

Angular works hard to keep application performance as fast as possible. One of the ways Angular does this is by reusing components as often as possible. Angular doesn't have to destroy and recreate multiple times, it will just switch out the data.

Angular努力工作以保持应用程序性能尽可能快。 Angular做到这一点的方法之一是尽可能多地重用组件。 Angular不必多次销毁和重新创建，它只会切换出数据。

Angular reuses components to improve performance.

Angular重用组件以提高性能。

A scenario where the snapshot method wouldn't work is when we are on one profile and click a link to second profile. The snapshot method only runs one time when the component is initiated. The component wouldn't update if we travelled from (/users/chris) to another profile (/users/nick).

当我们在一个配置文件上并单击指向第二个配置文件的链接时，快照方法将不起作用。 快照方法仅在启动组件时运行一次。 如果我们从（ /users/chris ）转到另一个配置文件（ /users/nick ），则该组件不会更新 。

If you are sure that you won't be using the same component over and over, you can use the snapshot method. Otherwise, we'll look to the observable way to

如果您确定不会重复使用同一组件，则可以使用快照方法。 否则，我们将寻找可观察的方法

( )

Observables by their nature are a stream of events. This means that when we go from one profile (/users/chris) to another profile (/users/nick), the Observable will pass along the new data as it changes.

可观察到的事物本身就是一连串的事件 。 这意味着当我们从一个配置文件（ /users/chris ）转到另一个配置文件（ /users/nick ）时，Observable将随着新数据的更改而传递。

Angular v4+ router provides us with which is an Observable we can use. Here's the syntax to use it instead of the snapshot method:

Angular v4 +路由器为我们提供了 ，这是我们可以使用的Observable。 这是使用它而不是快照方法的语法：

ngOnInit() {
      // subscribe to the parameters observable  this.route.paramMap.subscribe(params => {
        console.log(params.get('username'));    this.username = params.get('username');  });}

Now whenever we click to a new profile, you'll see the console.log() updating to show the username from the route.

现在，每当我们单击一个新的配置文件时，您都会看到console.log()更新以显示路由中的用户名。

Note: The Angular router will handle unsubscribing from ParamMap on its own.

注意 ：Angular路由器将自行处理从ParamMap退订。

Angular v2 (Angular v2)

The paramMap is one of the newer additions. If you're working with Angular v2 instead of v4+, you can grab route parameters with params instead of paramMap.

paramMap是较新的功能之一。 如果您使用的是Angular v2而不是v4 +，则可以使用params而不是paramMap来获取路线参数。

ngOnInit() {
      // subscribe to the parameters observable  this.route.params.subscribe(params => {
        console.log(params.username);    this.username = params.username;  });}

With just a few more lines of code, this component will listen for route changes now and always update the username based on the route.

仅需几行代码，此组件即可立即侦听路由更改，并始终根据路由更新username 。

( )

The Angular router makes it easy to work with route parameters. Remember to weigh your options when deciding between the snapshot vs the Observable way. Usually it's best to lean towards the Observable way just to avoid any issues you may run into in the future if you run into a scenario where you reuse a component.

Angular路由器使使用路由参数变得容易。 在确定快照方式与可观察方式之间时，请记住权衡一下您的选择。 通常，最好避免使用Observable方法，以免将来遇到重用组件的情况时可能遇到的任何问题。

翻译自:

angular2 获取参数