Angular2 update URL on 属性 changes (with browser history)

Question

说我有一个 Component 作为一种主细节。我希望 URL 反映细节部分的变化而不重新加载整个 Component。

这是我的：

home.routing.ts

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { HomeComponent } from "./home.component";
import { ItemListComponent } from "./item-list.component";

const homeRoutes: Routes = [
    {
        path: "home",
        component: HomeComponent,
        children: [
            {
                path: ":categoryId",
                component: HomeComponent
            }
        ]
    },
    {
        path: "home",
        component: HomeComponent
    }
];

export const homeRouting: ModuleWithProviders = RouterModule.forChild(homeRoutes);

home.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, Params } from "@angular/router";

...

@Component({
    template: `
            <div *ngFor="let category of categories">
                <span (click)="onSelect(category)">{{category.title}}</span>
            </div>
            <item-list></item-list>
    `,
})
export class HomeComponent implements OnInit {
    categories: Category[];
    selectedCategoryId: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router) {
    }

    ngOnInit() {
        this.getCategories();

        // Update selectedCategoryId if it is set in the URL
        this.route.params.forEach((params: Params) => {
            this.selectedCategoryId = params["categoryId"];
        })
    }

    onSelect(category: Category) {
        this.selectedCategoryId = category.id;

        // This will trigger a change in the item-list component and the
        // items will be loaded based on the selected category. 
        // What can I do here to reflect the change of selected category
        // in the URL?
    }

    getCategories() {
        ...
        this.categories = categoriesFromRestAPI;
    }
}

item-list.component.ts

import { Component, Input } from "@angular/core";

...

@Component({
    selector: "item-list",
    template: `
        <div *ngIf="categoryId">
            <div *ngFor="let item of items">
                <span>{{item.text}}</span>
            </div>
        </div>
    `
})
export class ItemListComponent {
    private _categoryId: string;
    items: Item[];

    constructor() {
    }

    @Input()
    set categoryId(categoryId: string) {
        this._categoryId = categoryId;
    }

    get categoryId() {
        return this._categoryId;
    }

    getItems() {
        // Get items based on this._categoryId;
        items = itemsFromRestApi;
    }
}

当用户选择一个类别时，我如何在 URL 中反映出来并更新浏览器历史记录以便后退按钮起作用？可能吗？我问过类似的问题 here，但使用的是路由器。我认为这两个选项可以在不同的场景中使用，但我就是无法正确使用它们。

Answer 1

如果您使用 this.router.navigate(...) 或 <a [routerLink]="..." 导航到相同的路线，其中只有参数值发生变化，那么组件实例将被重新使用，浏览器历史记录也会更新。

Angular2 update URL on 属性 changes (with browser history)

Angular2 update URL on property changes (with browser history)

angular2-routing

angular2-components

angular