Angular 2 rc 1 路由器 - 重写 url

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。但在里面，我没有得到身份证。并且一旦调用 ngOnInit，url 就会更改为http://localhost:49191/designer，不带查询字符串参数。

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

Answer 1

您需要像这样访问您的 MainComponent：

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

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

一切都应该正常。

基本上查询字符串参数不再用“?”分隔和 ”＆”。它们用分号 (;) 分隔。这称为Matrix URL notation，这是Angular 2 RC1 Router 的工作方式。

请参阅this answer 了解更多信息。