Angular 2 rc 1 路由器 - 重写网址

Question

更新到 rc 1 路由后，当 url 具有查询字符串参数时，我的应用程序不起作用。

以下是在应用组件中定义路由的方式：

import {Component,  OnInit, OnDestroy } from '@angular/core';
import {ROUTER_PROVIDERS, Routes, Router, ROUTER_DIRECTIVES} from '@angular/router';
@Component({ selector: 'my-app',
    providers:[ROUTER_PROVIDERS],
    template: 
    `
        <router-outlet></router-outlet>
    `
    , directives: [ROUTER_DIRECTIVES]
})
@Routes([
    {path:'/designer',              component: MainComponent},
    {path:'/designer/designs/:id',   component: SharedDesignComponent}
])
export class AppComponent implements OnInit, OnDestroy  {
constructor(private router: Router){}
ngOnInit() {  
    console.log("appComponent: Initialized");
 }
ngOnDestroy() {  } 
}

这是主要组件：

import {Component, OnInit, OnDestroy, Input, ChangeDetectorRef} from "@angular/core";
import {OnActivate, Router, RouteSegment} from "@angular/router";
@Component({
    selector: "my-main",
    templateUrl: "main.html"
})
export class MainComponent implements OnInit, OnDestroy, OnActivate {
    constructor(private router: Router){}
    routerOnActivate(curr: RouteSegment) : void { 
        let id = curr.getParam("designId");
    }
    ngOnInit() {}
}

所以问题是当我有这样的 url 时，http://localhost:49191/designer?designId=100，它正确地调用了主组件，并且也调用了 routerOnActivate 。但是在里面，我没有得到id。一旦调用 ngOnInit，url 就会更改为没有查询字符串参数的 http://localhost:49191/designer。

如何保留网址？而不是让它被路由器改变？

Answer 1

你需要像这样访问你的主组件：

http://localhost:49191/designer;designId=100

请注意我如何将?替换为;

一切都应该正常。

基本上，查询字符串参数不再用"？"和"&"分隔。它们用分号 （;） 分隔。这被称为矩阵URL表示法，这是Angular 2 RC1路由器的工作方式。

有关详细信息，请参阅此答案。