Question

请仅提供RC6及以上的当前答案。

我最近尝试从RC1升级到RC6，发现RouteSegment消失了。经过大量挖掘后，我发现了ActivatedRoute，但是从网址中提取原始值似乎很复杂。

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

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

如果是这样，有人可以解释为什么我需要一个地图和一个可观察的，只是为了从URL的查询字符串中提取值6？

有人可以解释一下我可以使用的新酷功能，以保证代码复杂性的大幅增加吗？

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

由于

Answer 1

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']; 如果您的组件不可重用。否则，此快照将仅创建一次，并且在您使用不同的param重新导航到同一组件时不会更改（意味着仅更改当前URL中的参数）。

以下是示例：

假设你在mydomain/mycomponent?id=1

您可以使用Observable queryParams或snapshot的订阅来获取'id'参数值。结果将是相同的。

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

使用Angular2 RC6获取queryParams的正确方法

1 个答案: