向Angular router.navigate添加参数

Question

首先，我不确定这是不是实现我想要的东西的正确方法..我正在尝试将如下所示的导出绑定添加到router . navigate()-方法:

<call [caller]="caller"></call>

问题是我从不使用该指令，而是通过路由器来处理：

acceptCall() {
   this.router.navigate(["call"]);
}

我如何实现相同的导出绑定从第一个例子中的接受呼叫（）-方法？我已经添加了一个输入（）变量，并尝试使用queryParams，如下所示：

@Input() caller: Caller;
acceptCall(caller) {
    this.router.navigate(["call"], {queryParams: caller});
}

但这并不起作用。

Answer 1

根据我的评论，您必须：

1-重新定义您的路线

{path: 'call/:caller', component: MyComponent }

2 - 更改父组件中的导航

this.router.navigate(["call", caller]);

3-在子组件中，获取参数

import { ActivatedRoute } from '@angular/router';
// code until ...
myParam: string;
constructor(private route: ActivatedRoute) {}
// code until ...
ngOnInit() {
    this.route.params.subscribe((params: Params) => this.myParam = params['caller']);
}