Angular2更新了属性更改的URL（带有浏览器历史记录）

Question

假设我有一个Component作为一种主要细节。我希望网址能够反映细节部分的变化，而无需重新加载整个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; 
    } 
} 

项目，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]="..."导航到相同的路线，其中只有参数值发生更改，那么会重用组件实例并更新浏览器历史记录。