Question

在角度6中，是否可以在名为路由器的辅助路由器出口中使用查询参数。我要查找的类型的示例URL是

localhost：4200 / home（sidebar：chat？animal = dog）

我希望能够设置查询参数：动物，并且还能够在组件中访问其值。

到目前为止，我已经在模板中尝试过

[routerLink]="gridRouterLink" [queryParams]="queryParams"

其中gridRouterLink = ["", {outlets: {sidebar: "chat"}}]

和queryParams = { animal: "dog"}

但是我得到类似localhost：4200 / home（sidebar：chat）？animal = dog

Answer 1

当前使用的是Angular 8，我只能使用控制器上的路由器来实现。

模板：

<button (click)="testOutletModal($event)">Test</button>

控制器：

testOutletModal($event: MouseEvent) {
  $event.preventDefault();

  const navigationExtras = { queryParams: { test: 1, project: 1 } };
  const commands = [
    {
      outlets: {
        modal: ['one', 'two', 3],
      },
    },
  ];
  this.router.navigate(commands, navigationExtras);
}

然后我的网址看起来像http://localhost:4200/(modal:one/two/3)?test=1&project=1。乍一看，错误的查询参数位于出口路由信息所在的()之外。但是，URL只能有一个?，因此一个参数是“数组”。

我尝试从为路由'modal：one / two / 3'配置的控制器访问queryParams，并且它可以正常工作。

this.route.queryParams.subscribe(qp => {
  console.log('Query Params', qp);
})
// Query Params {test: "1", project: "1"}

看来这是实现此目标的正确方法。

Answer 2

您可以按如下所示在路由中使用该参数：

words <- c("hello","house", "sun")

要在组件中获取参数

const routes:Routes = [
 { path: '/:id', component: ProfileComponent, name: 'Details'}
]

希望这会对您有所帮助。

Angular 6路由-命名辅助路由器出口内的查询参数

2 个答案: