Question

我想在我的子组件中使用变量“？search = value”。

根组件配置：

@RouteConfig([
    { path: '...', name: 'Project', component: ProjectComponent, useAsDefault: true}
])
class App {}

子组件配置：

@RouteConfig([
    { path: '/', name: 'List', component: ProjectListComponent, useAsDefault: true }
])
export class ProjectComponent{
    constructor(
        private _routeParams: RouteParams
    ){
        console.log(this._routeParams.get('search'))
    }

我打开

localhost:3000/?search=example

我看到（本身发生了变化）

http://localhost:3000/;search=example?search=example  // wtf???

和

console.log(this._routeParams.get('search')); // example

我打开

http://localhost:3000/;search=example

我看到了

http://localhost:3000/

和

console.log(this._routeParams.get('search')); // null - wtf???

请帮助=）

Answer 1

似乎是路由器的情况。 ...是非终端路线标记，与/...相同，ProjectComponent始终在导航期间加载，因为它与每个网址匹配。 ProjectListComponent映射到/，因此它有效地映射到与ProjectComponent相同的路由，但由于继承而被视为子路由 - 某种类型的冲突，两个组件都在同一个URL上。对于子路由器（矩阵参数），参数以;开头，而问号?仅用于主路由器参数。

子路由器和父路由器都捕获参数：

http://localhost:3000/?search=example

主路由器需要?，因此它不会捕获参数：

http://localhost:3000/;search=example

同样useAsDefault添加其位：

如果为true，则在没有子路由的情况下将导航到子路由在导航期间指定。

我打赌您看到的导航更改是由此参数引起的。如果没有调试，很难说它究竟是如何工作的。

Answer 2

Angular-2支持查询参数，但在浏览器地址栏的不同视图中显示。有些时间显示为/heroes?id=15&foo=foo，有些时间显示为/heroes;id=15;foo=foo。

您应该知道何时展示/heroes?id=15&foo=foo以及何时展示/heroes;id=15;foo=foo

当路线为父路线

时，

/heroes?id=15&foo=foo将显示在浏览器网址中当路线孩子路线

时，

/heroes;id=15;foo=foo会在浏览器网址中显示

但是，两个网址都可以使用id来获取routeParams.get()，如：

constructor(routeParams: RouteParams) {
  this._selectedId = +routeParams.get('id');
})

当网址以分号（;）分隔时，表示这是矩阵网址表示法

Matrix URL表示法是1996年提案中首次提出的一个想法   网络创始人Tim Berners-Lee。

尽管矩阵符号从未进入HTML标准，但确实如此   合法，它在浏览器路由系统中变得流行，作为一种方式   隔离属于父路由和子路由的参数。角度   组件路由器就是这样一个系统。

语法对我们来说可能看起来很奇怪，但用户不太可能注意到或   只要URL可以通过电子邮件发送并粘贴到浏览器中即可   这个地址栏就可以了。

如何识别父母和孩子的路线？对于使用/...的子路线，例如在您的app.component文件中

@RouteConfig([

  { // Crisis Center child route
    path: '/crisis-center/...',
    name: 'CrisisCenter',
    component: CrisisCenterComponent,
    useAsDefault: true
  },
  // here heroes is parent/ route route
  {path: '/heroes',   name: 'Heroes',     component: HeroListComponent}
])

See this example获取危机中心详情并点击取消并转到 heros详细信息并点击返回显示不同的网址

N.B： plunker视图通过单击右上角的蓝色“X”按钮弹出预览窗口。

如何获取查询参数？ Angular2

2 个答案: