无法接收在 Angular 路由中发送的查询参数

Question

我有一个组件路由到另一个传递一些条件参数的组件

这是定义路由的代码：

redirect(topicname : string){
    alert(topicname)
    this.router.navigate(['/chapters'], { queryParams: { topic: topicname } });
  }

并且在 Chapters.component.ts 文件中我定义了：

export class ChapterstemplComponent implements OnInit {
  topic : string;
  constructor( private route : ActivatedRoute) { 
    this.topic= this.route.snapshot.params.topic;
    alert( this.route.snapshot)
  }

但是 this.topic 没有收到任何值。我想在 chapters.component 的 HTML 文件中使用它。注意：警报消息确认 'topicname' 在第一个片段中发送良好但是在第二个片段中，路由没有收到任何参数这是相同的图片：

第一个/发送警报：

第二次/收到警报：

Answer 1

我们可以借助paramMap

获取查询参数

尝试做如下的操作，这将获取订阅 ActivatedRoute.[= 的 queryParams 中的参数。 14=]

ngOnInit() {
 this.route.queryParams.subscribe(params => {
    this.topic = params['topic'];
  });
}

您还可以在此处详细了解路由：

快乐编码..:)

无法接收在 Angular 路由中发送的查询参数

Cannot receive queryparameters sent in Angular routing

angular

query-parameters

angular-activatedroute