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

Question

请仅提供 RC6 及更高版本的当前答案。

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

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

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

如果是这样，有人能解释一下为什么我需要一个 map 和一个可观察对象来从 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();
    }
}

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

例子如下:

假设您在 mydomain/mycomponent?id=1

您可以使用对 Observable queryParams 或快照的订阅来获取“id”参数值。结果将是相同的。

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