将查询参数添加到当前路径Angular2 / 4

Question

我在路线'/ parent'上有一个父组件，它有一个链接，例如

<a routerLink="./" [queryParams]="{query: value}">

我在嵌套路由'/ parent / child'中有一个组件，它监听查询参数更改。问题是父组件生成没有子路由的链接，例如“/父？查询=值”。有没有办法只将查询参数添加到父组件的当前路由？

{
path: 'route/:value/:value_two',
component: component,
canActivate: [GuardService],
children: [{
    path: '',
    component: commonComponent
}, {
    path: 'child1',
    component: childOneComponent
}, {
    path: 'child2',
    component: childTwoComponent
}]

}

Answer 1

这对我有用

路线

{ path: 'component-two', component: ChildOne,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }

路线链接

<a [routerLink]="['/component-two/child-two']" [queryParams]="{ page: 99 }">Component Two</a>

在ts文件中

 private ngOnInit() {
     this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.id = +params['page'] || 0;
      });
  }

在父组件中你可以这样做

<nav>
  <a [routerLink]="['./child-one']">Child One</a>
  <a [routerLink]="['./child-two']">Child Two</a>
</nav>

Answer 2

如果你想拥有像/ parent / child这样的路线，你可以使用：

<a [routerLink]="['parent', 'value']" >