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

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();
    }
}

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

这是一个例子:

让我们说你在 mydomain/mycomponent?id=1

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

现在导航到mydomain/mycomponent?id=2并使用订阅你会得到"2"的值,但使用快照它仍然是"1".