使用 Angular2 RC6 获取 queryParams 的正确方法 [英] Proper way to get queryParams with Angular2 RC6

问题描述

请仅提供 RC6 及更高版本的最新答案.

Please only provide answers current for RC6 and above.

我最近尝试从 RC1 升级到 RC6，发现 RouteSegment 不见了.经过大量挖掘，我找到了 ActivatedRoute，但是从 url 中提取原始值似乎过于复杂.

I recently attempted to upgrade from RC1 to RC6 and found RouteSegment is gone. After a lot of digging, I've found ActivatedRoute, however it appears to be WAY over complicated for pulling out a raw value from the url.

以下是读取静态查询值的新正确方法吗?

Is the new correct way to read a static query value the following?

const id : Observable<number> = this.route.queryParams.map(p => p.id);

如果是这样，请解释一下为什么我需要一个地图和一个 observable 来从 URL 的查询字符串中提取值 6?

If so, can some please explain why I need a map and an observable just to pull the value 6 out of the URL's query string?

有人可以解释一下我有什么新的很酷的功能可以保证代码复杂性的大幅增加吗?

Can someone please explain what new cool feature I have at my disposal to warrant this much increase in code complexity?

如果我遗漏了一些明显的东西，请指出正确的方向.我更愿意坚持使用简单的 URL 查询系统，例如: let id = params.id;

If I'm missing something obvious, please point me in the right direction. I'd prefer to stick to a simple URL query system like: let id = params.id;

谢谢

推荐答案

import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs/Rx";

@Component({
    moduleId: module.id,
    selector: 'app-home-component',
    template: `
                <h1>
                    Home Component!
                </h1>
                <hr>
                {{param}}
              `,
    styles: []
 })

export class HomeComponent implements OnDestroy {
    private subscription: Subscription;

    param: string;

    constructor(private route: ActivatedRoute) {
         this.subscription = route.queryParams.subscribe(
             (queryParam: any) => this.param = queryParam['paramName']
         );
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

你也可以使用快照(更少的代码)例如:let foo = this.route.snapshot.queryParams['foo'];如果您的组件不可重用.否则，此快照将仅创建一次，并且在您重新导航到具有不同参数的同一组件时不会更改(意味着仅更改当前 url 中的一个参数).

You can also use snapshot (less code) ex: let foo = this.route.snapshot.queryParams['foo']; if your component is not reusable. Otherwise this snapshot will be only created once and will not change when you re-navigate to the same component with different param (meaning changing just a parameter in current url).

示例如下:

假设您在 mydomain/mycomponent?id=1

您可以使用对 Observable queryParams 或快照的订阅来获取 'id' 参数值.结果是一样的.

You can use a subscription to Observable queryParams or snapshot to get the 'id' parameter value. Results will be the same.

现在导航到 mydomain/mycomponent?id=2 并使用订阅您将获得2"作为值，但使用快照它仍然是1".

Now navigate to mydomain/mycomponent?id=2 and using subscription you will get '2' as a value, but using snapshot it will still be '1'.

这篇关于使用 Angular2 RC6 获取 queryParams 的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！