Angular 4中带有数组参数的路由答案

【问题标题】：Route with array parameter in Angular 4Angular 4中带有数组参数的路由
【发布时间】：2018-03-08 17:24:03
【问题描述】：

我目前正在尝试解决 Angular 4 中的路由问题。我希望 URL 包含参数数组，所以它看起来像这样：/#/WF001A;operationIds=146469,146470。这个 URL 是 Angular 使用 [routerLink] 生成的。参数需要可以从组件访问（我猜这应该不是问题）。

问题是 - 我不知道如何为其创建路线。我尝试了什么：

{path: 'WF001A/:operationIds', component: WF001AComponent}
{path: 'WF001A/:operationIds[]', component: WF001AComponent}
{path: 'WF001A:operationIds[]', component: WF001AComponent}
{path: 'WF001A;:operationIds[]', component: WF001AComponent}

编辑： 这是链接的生成方式：

<a href="#" [routerLink]="['/WF001A', {operationIds:[146469, 146470]}]">test</a>

编辑 2： 组件类：

export class WF001AComponent implements OnInit {
    public title = 'WF001A';

    public constructor (private WF001AService: WF001AService, private route: ActivatedRoute) {}

    public ngOnInit(): void {
        this.route.paramMap.subscribe(params => {
            // This is never executed, for route is not recognized
            let myArray=params.getAll('operationIds');
            console.log(myArray);
        });
    }
}

【问题讨论】：

可以在模板中添加routerLink参数吗？
添加了我在模板中使用的 routerLink。
添加组件 sn-p.
你是如何解决{path: 'WF001A:operationIds[]', component: WF001AComponent}这种语法的问题的？

标签： javascript angular typescript routing routes

【解决方案1】：

我假设您的组件中有 ActivatedRoute 对象，例如：

constructor(
    ...,
    private route: ActivatedRoute) { }

~~我假设 WF001A 是参数名称，~~ 所以你可以这样做：

this.route.paramMap.subscribe(params => {
  let i=0;
  let myArray=params.getAll('operationIds');
}

您可以在official documentation中找到有关可选参数的更多信息

【讨论】：

我认为这并不能解决问题。我在控制台中收到此错误：Error: Cannot match any routes. URL Segment: 'WF001A;operationIds=146469,146470'，这意味着没有为数组准备路由。
我尝试使用您的示例，但不幸的是它从未执行，因为 Angular 实际上不知道任何匹配 WF001A;operationIds=146469,146470 或 WF001A/operationIds=146469,146470 的路由。但是，您对处理部分的看法是正确的，在发送如下参数后：WF001A/146469,146470，我已经能够获取这些数据。
不知道如何解决这个问题，因为这部分是序列化这些参数的方式的错误，但我认为你真的应该接受你的答案，因为它踢了我正确的方式:)