检索组件内的查询参数

Question

假设我有一个带有以下元素的 HTML 模板。

<a [routerLink]="['/final', {issue_id: 2356254}]">SUBMIT</a>

单击此超链接将生成如下 URL：

http://localhost:3000/final;issue_id=2356254

我正在尝试在组件的构造函数中访问此查询参数。

export class FinalComponent {
    constructor(private route: ActivatedRoute){
        this.issueId = route.params._value.issue_id;
        console.log(this.issueId);
    }
}

到目前为止这有效，但我知道这不是正确的方法。在 Angular 2 组件中访问查询参数的正确方法是什么？

Answer 1

使用ActivatedRoute 是一个好的开始。 您可以订阅params 属性，因为它是Observable：

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    // access route params
    console.log(params['id']);
  });
}

---

GitHub 上的示例

https://github.com/Angular2Buch/book-monkey2/blob/master/src/app/book-monkey/iteration-4/http/book-details/book-details.component.ts#L23

route.snapshot

如果您对参数的更改不感兴趣，您可以简单地使用this.route.snapshot.params。所以你不必处理 Observables。

样本

constructor(route: ActivatedRoute) {
  let id = route.snapshot.params['id];
}