Question

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

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

点击此超链接将生成如下网址：

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 Component中访问查询参数的正确方法是什么？

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];
}

检索组件内的查询参数

1 个答案: