在Angular 4中使用数组参数的路由

问题描述：

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

问题是 - 我不知道如何为它创建路线。我的尝试：

{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。 – lemon

添加组件片段。 – lemon

答

我假设你有ActivatedRoute对象的组成部分，是这样的：

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

~~我认为WF001A是参数名称，~~ 所以你可以做这样的事情：

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

有关可选参数的更多信息，请参阅official documentation

我认为这并不能解决问题。我在控制台中得到这个错误：'错误：不能匹配任何路由。网址段：'WF001A; operationIds = 146469,146470'，这意味着该路线未准备好阵列。 – lemon

由于有新信息更新:) –

我试图使用你的例子，但不幸的是它永远不会执行，因为Angular实际上不知道任何匹配'WF001A; operationIds = 146469,146470'或'WF001A/operationIds = 146469 ，146470'。然而，你是正确的处理部分，发送这样的参数后：'WF001A/146469,146470'，我已经能够获得这些数据。 – lemon

在Angular 4中使用数组参数的路由

相关推荐